以下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TITLE</title>
<style>
.a-block {
background-color: #000066;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
padding: 10px;
gap:10px;
}
.a-block > div {
background-color: #FF0000;
border: 1px solid rgba(255, 255, 255, 0.8);
padding: 50px;
gap: 10px;
}
.c_title {
display:grid;
grid-area: 1 / 1 / 2 / 2
font-size: 2em;
text-align: left;
background-color: #FF0000;
gap: 10px;
}
.c_body {
display:grid;
grid-area: 2 / 1 / 3 / 2
font-size: 1.5em;
text-align: justify;
font-size: calc(1.5em + (1vw - 0.5em)); /* adapt font-size based on screen size */
min-font-size: 0.8em; /* minimum font-size */
background-color: #0000FF;
gap: 10px;
}
.p_img {
display:grid;
grid-area: 1 / 2 / 3 / 3
background-color: #FF0000;
gap: 10px;
}
.p_img > img {
object-fit: cover;
width: 100%;
max-height: 100%;
}
}
</style>
</head>
<body>
<div class="a-block" >
<div class="c_title">title</div>
<div class="c_body">
Lorem ipsum dolor sit
</div>
<div class="p_img" >
<img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" >
</div>
</div>
<p></p>
</body>
</html>
产生如下结果
浏览器呈现结果
我希望在第一列中堆叠在一起的两个div位于第一行。我希望在第二列中生成的图像是第二行和第一行
看着Chrome的检查器，我可以看到我的网格布局信息不知何故被忽略，但我没有找到如何修复它
Chrome检查器视图
我尝试了很多网格布局和属性的变化，但它一直被忽略。
.a-block {
background-color: #000066;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
padding: 10px;
gap:10px;
}
.a-block > div {
background-color: #FF0000;
border: 1px solid rgba(255, 255, 255, 0.8);
padding: 50px;
gap: 10px;
}
.c_title {
font-size: 2em;
text-align: left;
background-color: #FF0000;
gap: 10px;
}
.c_body {
font-size: 1.5em;
text-align: justify;
font-size: calc(1.5em + (1vw - 0.5em)); /* adapt font-size based on screen size */
min-font-size: 0.8em; /* minimum font-size */
background-color: #0000FF;
gap: 10px;
}
.p_img {
grid-area: 1 / 2 / span 2 / 2;
background-color: #FF0000;
gap: 10px;
}
.p_img > img {
object-fit: cover;
width: 100%;
max-height: 100%;
}<div class="a-block" >
<div class="c_title">title</div>
<div class="c_body">
Lorem ipsum dolor sit
</div>
<div class="p_img" >
<img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" >
</div>
</div>