CSS Grid布局异常：如何实现指定2×2网格布局？

需求是实现2×2网格布局：

• 第一列：c_title与c_body上下堆叠
• 第二列：p_img跨两行显示

但当前代码的Grid布局被浏览器忽略，实际效果不符合预期：原本该堆叠的两个div处于同一行，图片也未按要求跨两行显示，Chrome调试器可见Grid布局信息未生效，尝试多种属性调整仍无法解决。

问题代码 #

<!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>

问题原因 #

1. CSS语法错误：所有grid-area属性末尾都缺少分号，导致浏览器解析该属性失败，后续CSS规则也被忽略
2. 多余的display:grid：c_title、c_body、p_img是网格容器的子项，不需要设置display:grid，这会让它们变成独立的网格容器，破坏父容器的布局
3. 无效属性：min-font-size不是合法CSS属性，无法生效
4. 多余的闭合大括号：样式末尾多了一个}，导致CSS解析异常

修正后的代码 #

<!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;
        }
        .c_title {
          grid-area: 1 / 1 / 2 / 2;
          font-size: 2em;
          text-align: left;
          background-color: #FF0000;
        }
        .c_body {
          grid-area: 2 / 1 / 3 / 2;
          text-align: justify;
          font-size: clamp(0.8em, 1.5em + (1vw - 0.5em), 3em); /* 使用clamp实现字体大小范围控制 */
          background-color: #0000FF;
        }
        .p_img  {
         grid-area: 1 / 2 / 3 / 3;
         background-color: #FF0000;
        }
        .p_img  > img {
          object-fit: cover;
          width: 100%;
          height: 100%; /* 改为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>

关键修改说明 #

• 给所有grid-area属性添加末尾分号，修复语法错误
• 移除子元素的display:grid和多余的gap属性
• 用clamp()替代无效的min-font-size，确保字体大小在指定范围内自适应
• 移除样式末尾多余的闭合大括号
• 将图片的max-height:100%改为height:100%，确保图片完全填满跨两行的容器

内容的提问来源于stack exchange，提问作者ArchipelagoT