A fully responsive grid system with four lines of CSS

Impossible! Hacky! Nope, neither of these things. With the emergence of CSS Grid, we can now create complex grid based layouts with the minimal amount of CSS and markup.

Here’s an example:

As you’ll see, there’s just four declarations on the parent:

section {
  display: grid;
  grid-gap: $grid-gap/2;
  grid-template-columns: repeat(auto-fill, minmax($column-min, $column-max));
  grid-auto-rows: minmax($row-min, $row-max);
}

And that’s it - you have a fully responsive grid. If you drag the handles of the browser and resize, you’ll see how the grid automatically flows.

If you’d like to learn CSS Grid (and I strongly advise you do) then check out the following resources:

Grid by Example: https://gridbyexample.com/patterns/ CSS Grid Garden: http://cssgridgarden.com/