CSS Grid Layout
C
S
S
G
R
I
D
<style>
.container > div {
background: #eee;
padding: 1em;
}
.container > div:nth-child(odd) {
background: #ddd;
}
</style>
<body>
<div class="container">
<div>Grid item one.</div>
<div>Grid item two.</div>
<div>Grid item three.</div>
<div>Grid item four.</div>
</div>
 </body>

Grid Basics

Getting Started

We'll begin by adding a little CSS to automatically shade the grid items in alternating shades of gray. Use the CSS code to the left to take care of that.

Building a Grid Container and Grid Items


Next, well use HTML to create a generic element (a div with a class of .container) to serve as our grid container. All CSS Grid layouts start with a grid container. Inside the grid container will be a series of grid items ("elements" or "boxes") that will contain the content of this page. Use the HTML code to the left.

Below is what you get in a browser.

.container {
display: grid;
grid-template-columns: 70% 30%;
grid-column-gap: 1em;
grid-row-gap: 1em;
}

Controlling the Grid Container

So far, we haven't done anything with CSS Grid. We'll be using the grid container to define the number of columns and how rows will be built.

The container starts by declaring a display type of "grid" with display: grid. Next, we use grid-template-columns to indicate how many columns we want. In this case there are two values following the property meaning this will be a two column grid. The first column will use 70% of the space and the second column will use 30%.

NOTE: Units could be percentages, pixels, rems or even a combination such as 120px 20% 2fr 1fr;. More on fr below.

grid-column-gap creates a gap between the columns and grid-row-gap creates a gap between the rows. You can control both with simply grid-gap: 1em.

The "Implicit" Grid

Viewed in a browser, you'll see the 70%/30% split. Also notice that because there are four elements (divs) in the HTML, only the first two elements are on the first row.

The final two elements automatically placed themselves on the second row via CSS Grid's auto-placement algorithm. This is referred to as the implicit grid. We didn't have to explicitly say what rows the elements should go on. It was implied that the next elements would have to move down to the next row.

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1em;
 }

Using the "fr" Unit

CSS Grid brought us a new unit called "fractional" or fr. An "fr" is a flexible sizing unit that can be used with other units, such as percentage, or alone. 1fr means the element should take up one fraction of the remaining or unassigned space.

In the example to the left, we've decided to use 3 columns, each using 1 fraction (1fr) of the available space. Notice too that instead of using both grid-column-gap and grid-row-gap, we have instead handled both with the shorthand property grid-gap.

The result in a browser is shown below. Notice that with four elements, the fourth box is moved down to the second row.

.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
 grid-gap: 1em;
}

Changing Ratios of Fractionals

In this example, we have changed the second column to using 2 fractions of the available space. We are still using just 3 columns, but the second column is now twice as wide as the first and third columns. As before, the fourth element is moved down to the second row via the "implicit grid."

The result in a browser is shown below.

<div class="container">
<div>Grid item one.</div>
<div>Grid item two.</div>
<div>Grid item three.</div>
<div>Grid item four.</div>
<div>Grid item five.</div>
<div>Grid item six.</div>
<div>Grid item seven.</div>
<div>Grid item eight.</div>
</div>

Add More Elements

We are going to need a few more boxes (elements) for content to illustrate the next couple of examples.

Add four more elements to the HMTL as shown to the left.

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
 grid-gap: 1em;
}

An Eight Column Grid

If you want an eight column layout, you can simply write our 1fr eight times, as shown to the left.

The result in a browser is shown below.

.container {
display: grid;
grid-template-columns: repeat(2, 1fr 2fr);
 grid-gap: 1em;
}

Repeating Fractional Units

A better alternative to writing out 1fr eight times is to use a new function in CSS Grid called repeat(). Now, if we need 8 equal width columns, instead of writing it out as grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr, we can simply write out grid-template-columns: repeat(8, 1fr).

In the example to the left, we are repeating the pattern 1fr 2fr two times.

The result in a browser is shown below.

<div class="container">
<div>Grid item one. Grid item one. Grid item one. Grid item one. Grid item one. Grid item one. Grid item one. Grid item one.</div>
<div>Grid item two.</div>
<div>Grid item three.</div>
<div>Grid item four.</div>
<div>Grid item five.</div>
<div>Grid item six.</div>
<div>Grid item seven.</div>
<div>Grid item eight.</div>
</div>

Add More Content

We are going to need more content in one of our elements to see the effect of the next lesson.

Add more text to the first grid item, as shown to the left.

Adding and Controlling Grid Rows

As we learned earlier, we don't have to explicitly state the number of rows. Rows are "implicitly" created via CSS Grid's "auto placement algorithm."

There is also no need to specify a height for any of the grid elements or rows. That's because CSS Grid automatically expands the height of an element (box) to fit the content inside.

Notice in the example below that grid item one has expanded its height to accommodate the increased content it holds. The other elements on that row also expand to the same height. This is something that was very difficult to do in the old days of "floated" layouts. (It was referred to as the Holy Grail Layout problem). With CSS Grid, it's a breeze.

.container {
display: grid;
grid-template-columns: repeat(2, 1fr 2fr);
grid-auto-rows: minmax(120px, auto);
grid-gap: 1em;
}

Controlling Row Heights

There are times when one wants to control the minimum height of a row while still allowing the content to grow in height if more content is added. For that, we use the grid-auto-rows: property with a function called minmax().

Add the line to the left and notice the effect on the rows. The first number (120px) corresponds to the minimum height of a row. The second number corresponds to the maximum height a row can be (auto). As you can see below, the content in the first grid item was more than 120 pixels tall, so the content expanded to the height it needed. However, none of the grid items on the second row needed more than 120 pixels, so that row is set to that height and it slightly increased the height of the second row.