My page layout grid system setup

Coding layout based on columns has always been a painful process using CSS. But now that there is wide support for CSS grid, it no longer has to be! Here is how I do it for my site.

I originally referred to Chris Ferdinandi's approach, but modified my version in a way that I felt was more flexible to work with.

Grid system

We start with our grid system, taking a mobile-first approach by only enabling a grid on non-mobile screen sizes:

.row {
  @media (min-width: 480px) {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr auto;
  }
}

This sets up a 12-column layout, each with one fractional unit. The grid-template-rows property defines a row with a minimum size of 1fr and an auto sized maximum.

You can also use column-gap to set a default gap between the columns, but I prefer doing it on specific areas on the site that it's needed.

Columns

We then define the columns we need to work with, setting how they span for different screen sizes:

@media (min-width: 480px) {
  .col-2, .col-3, .col-4, .col-5, .col-6, .col-7 { grid-column: auto / span 6; }
  .col-8, .col-9, .col-10, .col-11, .col-12 { grid-column: auto / span 12; }
}
@media (min-width: 800px) {
  .col-2 { grid-column: auto / span 2; }
  .col-3 { grid-column: auto / span 3; }
  .col-4 { grid-column: auto / span 4; }
  .col-6 { grid-column: auto / span 6; }
  .col-7 { grid-column: auto / span 7; }
  .col-8 { grid-column: auto / span 8; }
  .col-9 { grid-column: auto / span 9; }
  .col-10 { grid-column: auto / span 10; }
  .col-11 { grid-column: auto / span 11; }
  .col-12 { grid-column: auto / span 12; }
}

Here's an example of how it's used in the HTML for a two-column layout:

<section class="row">
  <div class="col-6">Left column</div>
  <div class="col-6">Right column</div>
</section>

Column options

You can adjust how your column works using the grid-column property. For example, this offsets the column and limits how wide it goes:

grid-column: 3 / 11;

The column starts on the third unit and its width is limited until it gets to unit 11. This means the content area starts on column 3 of 12 and is 8 columns wide, ending on column 10. You can see an example of this on this blog post page, where the content column is narrower than the header and footer columns and appears centered.

For additional examples, here's a boilerplate template you can use that includes some column layouts.