CSS 网格 - 如何拥有 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>