时间戳

首页 > 解决方案 > 我的 CSS 网格元素不会跨越多个列

html - 我的 CSS 网格元素不会跨越多个列

问题描述

我无法让我的 div 元素跨越 CSS 网格中的多个列。我做错了什么？

.main {
          display: grid;
          grid-template-areas: "a b"
                               "c c";
          grid-template-rows: 100px 100px;
          grid-template-columns: 200px 150px;
          }
<body>
  <div class="main">
  <div id=a>
    <p>
      This is the content of box A.
    </p>
  </div>
  <div id=b>
    <p>
      This is the content of box B.
    </p>
  </div>
  <div id=c>
    <p>
      This is the content of box C.
    </p>
  </div>
  </div>
</body>

这是上述代码输出的图像：

这是上述代码输出的图像。

标签： htmlcss

解决方案

您需要明确指定元素所属的网格区域。

#a { grid-area: a; }
#b { grid-area: b; }
#c { grid-area: c; }

推荐阅读