CSS Grid - how to have 2, 3, 4, 5, or 6 columns

问题

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.

回答1:

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.

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>

来源：https://stackoverflow.com/questions/48367393/css-grid-how-to-have-2-3-4-5-or-6-columns

标签

css

css3

css-grid