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

Question

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.

Where is your CSS? If you haven't made an attempt yourself then this is not really the place to ask, there's a lot of good documentation for grid layouts out there that can help you put one together, and then if you have a specific problem, post it here and people can help :) — DBS, Jan 21 '18 at 13:49

Michael Benjamin · Answer 1 · 2018-01-21T21:19:53.527

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>

Thank you for the input - I thought about using a common denominator - if I'd also like to use quarters I guess the denominator would be 60. What I don't understand though looking at your code is the following: You're providing a start column and then the span like: grid-column: 1 / span 12 defining the .two-fifths class - however, .two-fifths can be either left or right of .three-fifths - playing around with this stuff it looks to me that Flexbox would be easier to achieve this, wouldn't it?? — user1678736, Jan 21 '18 at 23:37
The first value in `grid-column` is the start line. You can change that to anything you want. Switch the start numbers if you need to. No problem. Or leave them out entirely (`grid-column: span 12`), then auto-placement takes control. Try it out. If something else is unclear, post another question. — Michael Benjamin, Jan 22 '18 at 00:33
Thanks Michael - I tried it with grid-template-columns: repeat(60, 1fr) - it works up to a grid-gap of 20px; if I like to use 40px as the grid-gap it breaks the layout and doesn't work anymore - maybe an issue with Safari or am I missing something? — user1678736, Jan 22 '18 at 12:57
Well, a 40px grid column gap multiplied 59 times creates a fixed width of 2360px. That's the minimum width of the container. It doesn't even include any content that may be added into each column. That's going to give you a horizontal scrollbar on many screens. — Michael Benjamin, Jan 22 '18 at 17:44

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

1 Answers1

Linked