CSS Grid Basic Examples

This is a simple but powerful part of CSS Grid. In float-based layouts you have to use percentages to spread columns across the page. For example if you wanted four columns to share the page you would have to set the width of each to 25%:
width: 25%;

Then if you decided you wanted five columns you would have to go to all of the elements and change their width to width: 20%;.

Some numbers like 3 columns didn't quite fit percent (33.33333%).

CSS Grid is different in a few ways. The first big difference is that you specify the width of columns, not individually on each element. Below is an example of making four equal columns using the percent.

.grid-container{
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
}
                    

If you want to add another column then you would just add another number to the grid-template-columns.
grid-template-columns: 20% 20% 20% 20% 20%;

With CSS Grid we also now have another big change, the fractional unit: fr. This makes adding columns even easier and the math involved is simpler. Here is a four column layout

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

To change it to five columns you just add a fifth one to the end
grid-template-columns: 1fr 1fr 1fr 1fr 1fr

Fr works by adding all of the fractional units together and diviing the available space among them.

Try the example below. Remember that if you add more columns in the CSS you will also have to add more elements in the grid (See Extends Example 1 below).

You can mix and match different units for your column widths. You can also do that for rows as well. In this example the first column is a fractional unit, the second is set to 20em and the third at 75 pixels.The browser will set columns two and three first because they are fixed width and then assign the rest of the space to column one.

Try clicking the CSS tab to show and hide it and you will see that columns two and three stay the same but column one grows and shrinks with the available space.

grid-template-columns: 200px 500px 1fr;
or
grid-template-columns: 10rem auto 20rem;
                    

If you want to add a number of columns with the same settings then there is a handy repeat unit. This can also be used for rows.

The format is as follows: repeat(#-of-repeats, value-to-repeat);. So if you wanted 12 columns all of equal width:
grid-template-columns: repeat(12, 1fr);

grid-template-columns: 200px 1fr 1fr 1fr 1fr 200px;

grid-template-columns: 200px repeat(4, 1fr) 200px;
                    

grid-template-columns: repeat(5, 50px 1fr);
                    

By default each grid item is only one column wide. You can style individual items to span more than one column. There are a number of different ways to tell the browser to strech an element over more than one column.

In this example we will look at setting the grid-column property using span. The basic idea is that you select one of the grid items and then set how many columns you want it to span.

.box.one {
    grid-column: span 3;
}
                    

In the example above looks for an element with both box and one classes in it like this

<div class="box one">My Box</div>
                    

IMPORTANT when you are creating classes for your grid item elements, make sure that you hvae different class names for elements you want to span different amounts.

So far we've only had each element cover one column. There are a number of different ways to tell the browser to strech an element over more than one column.

When you add columns the browser will automatically add grid lines for those columns. Because the first line on the left is a grid line, there is always one more grid line than there are columns (the same is true for rows).

In the example above there are three columns and four grid lines (1, 2, 3, 4 going left to right). There are also two rows with three grid lines (1, 2, 3 going top to bottom).

In order to force different elements to span different numbers of columns we will now have to add CSS for each individual element and define how many columns it spans.

So we have given individual classes to each element this time in addition to the box class which is there for visuals.

Here is an example of CSS that makes section.element1 span two columns starting at grid line 1 and ending at grid line 3.

Instead of having to write the grid-column-start and grid-column-end properties each time, you can use the grid-column property and then write in the starting column, a slash (/), then the ending column:

So far we've only defined columns. Now it's time to add some rows. Luckily this is relatively easy. You can add rows using the same syntax as adding columns except you use grid-template-rows: instead of grid-template-columns:

We have also introduced a new unit: max-content. This tells the browser to make the row as high as the tallest piece of content in the row. A row defined this way will grow with its content.

Using grid line numbers can get confusing. And if you change the number of columns then you will have to go back and redo everything.

Luckily there is another way. You can create grid areas.Like most of CSS Grid it can take a couple of tries to get used to these, but once you do it's my opinion that they are the easiest, most readable way to lay out the major sections of your site.

Template Areas are MUCH easier to use if you have sketched out the content areas of your site ahead of time and know how many rows and columns you have and what you are going to call the content areas covering those rows and columns.

In the grid below we've defined two columns and three rows:

    display: grid;
    grid-template-columns: 1fr 25em;
    grid-template-rows: 5em max-content 10em;
                    

Let's say we want our site to look something like this:

In the first row the header spans both columns. In the second row the article is in the first column and the sidebar is in the second column. In the third row the footer spans both columns.

To define the grid area we will make one entry for each row. This is inside quote marks " " If you you don't put each row in quotes it doesn't work.

grid-template-areas:
      "header header"
      "article sidebar"
      "footer footer";
                    

It may help to draw over your wireframes to help you see where the grid area names are needed. See the yellow lines and text below.

If you had six columns and wanted the header to span all six columns then you would write header six times like
"header header header header header header"

Now we can more easily put elements in thos grid areas we defined. Here we are using the classes of elements to associate them with an area:

  header{ grid-area: header; }
  article{ grid-area: article; }
  sidebar{ grid-area: sidebar; }
  footer{ grid-area: footer; }
                    

Notice that quotes are NOT used this time.