CSS网格-如何具有2、3、4、5或6列 [英] CSS Grid - how to have 2, 3, 4, 5, or 6 columns

问题描述

我试图弄清楚如何将CSS网格用于某些非对称布局，例如：

I'm trying to figure out how I could use CSS grid for some asymmetric layouts like this:

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

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

I believe the main issue is defining the column with on the child element. I hope somebody can help. Thanks.

推荐答案

您可以使用称为 基于行的展示位置 。

You can create the layouts using the Grid feature known as line-based placement.

此功能允许您在容器中的任意位置调整网格项目的大小和位置。

This feature allows you to size and place grid items anywhere in the container.

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

Since the first grid has five columns and the second grid has six columns, you could create two different set of rules – having the correct number of columns – for each grid container.

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

Or, you can create just one rule that covers both layouts, and possibly other column counts, by using a common denominator. In this case, a 30-column grid works in both cases.

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

这篇关于CSS网格-如何具有2、3、4、5或6列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！