A Beginner’s Guide to CSS Grid Layout — SitePoint

<div class="container">
  <header>headerheader>
  <aside>asideaside>
  <main>mainmain>
  <footer>footerfooter>
div>

So far, we haven’t achieved much, as we would get the same result without display: grid.

Further reading:

Setting a Gap Between Grid Items

Let’s first space our divs apart a bit with the gap property:

.container {
  display: grid;
  gap: 10px;
}

The gap property inserts space between the elements vertically and horizontally, as we’ll see shortly. (We can set different horizontal and vertical gaps if we need to.)

Further reading:

Setting Up Grid Columns

Currently, we have an “implicit” grid — meaning that the browser is just figuring out a grid for itself, as we haven’t specified any rows or columns yet. By default, we just get one column and four rows — one for each grid item. Let’s now specify some columns:

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

With grid-template-columns, we’re specifying that we want four columns each with a width of 1fr, or one fraction of the available space. (Instead of 1fr 1fr 1fr 1fr we could write repeat(4, 1fr) using the very handy repeat() function.)

Now our grid items are laid out in one row, as shown below.

Further reading:

Organizing Grid Items into Rows and Columns

Now let’s organize our grid items into rows and columns, as we might see them on a standard web page layout.

Firstly, we’ll specify three rows with the grid-template-rows property:

.container {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
}

If we add that line to the Pen above, not much will happen yet, as we haven’t specified how we want our grid items to fit into these rows and columns. (Again note that auto auto auto could be written as repeat(3, auto) using the repeat() function.)

Further reading:

Placing Grid Items on the Grid

Our browser’s developer tools come in very handy for understanding CSS Grid layout. If we inspect our code so far, we can see the horizontal and vertical grid lines that define our grid, as pictured below.

There are five vertical grid lines and four horizontal grid lines, all of them numbered. We can use these grid lines to specify how we want our grid items laid out.

Let’s first set the

header {
  grid-column: 1 / 5;
  grid-row: 1;
}