CSS Grid - 如何拥有 2、3、4、5 或 6 列

Question

我正在尝试弄清楚如何将 CSS 网格用于一些不对称布局，如下所示：

<h3>Two-Fifths - Three-Fifths</h3>
<div class="cols">
  <div class="two-fifths">
    <p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>
  </div>
  <div class="three-fifths">
    <p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>
  </div>
</div>
<hr />
<h3>One-Sixth - Five-Sixths</h3>
<div class="cols">
  <div class="one-sixth">
    <p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>
  </div>
  <div class="five-sixths">
    <p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>
  </div>
</div>

我认为主要问题是在子元素上定义列。我希望有人能帮忙。谢谢。

Answer 1

您可以使用称为line-based placement 的网格功能创建布局。

此功能允许您调整网格项目的大小并将其放置在容器中的任何位置。

由于第一个网格有五列，第二个网格有六列，因此您可以为每个网格容器创建两组不同的规则（列数正确）。

或者，您可以通过使用一个公分母来创建一个涵盖两种布局以及可能的其他列数的规则。在这种情况下，一个 30 列的网格适用于这两种情况。

.cols {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  grid-column-gap: 10px;
}

.two-fifths {
  grid-column: 1 / span 12;   /* 2 x 6 */
}

.three-fifths {
  grid-column: 13 / span 18;  /* 3 x 6 */
}

.one-sixth {
  grid-column: 1 / span 5;    /* 1 x 5 */
  grid-row: 2;
}

.five-sixths {
  grid-column: 6 / span 25;   /* 5 x 5 */
  grid-row: 2;
}

<h3>Two-Fifths - Three-Fifths</h3>
<div class="cols">
  <div class="two-fifths">
    <p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>
  </div>
  <div class="three-fifths">
    <p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>
  </div>
</div>
<h3>One-Sixth - Five-Sixths</h3>
<div class="cols">
  <div class="one-sixth">
    <p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>
  </div>
  <div class="five-sixths">
    <p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>
  </div>
</div>