How to Create a Responsive Grid Layout With Under 10 Lines of CSS.

Codepen

https://codepen.io/r0ss26/pen/ExKQMyB

Demo

A simple responsive grid layout.

Creating a responsive grid layout is a common task which doesn’t need to be over-complicated. It can be done in under 10 lines of CSS without the need for media queries. In this blog post I will outline a quick and simple way to create a grid layout, with explanations for each CSS property used. Jump to the end if you just want to see the code.

The best part of this approach is that it’s completely dynamic, allowing you to add as many or as few items to the grid as necessary which is great for situations when the number of items in the grid might change.

Markup

For this tutorial we will use the following markup:

Flexbox Vs. Grid

When attempting to create such a layout using only flex-box we run into a few problems. First of all, when the items wrap as the screen width is reduced, the width of the parent container does not adjust accordingly, resulting in the content not being centred, and you end up with the following situation, where there is excess space on one side:

A workaround for this problem might be to centre the content along the main axis with justify-content: centre on the parent element. This, however, leads to a further issue which occurs when there is an odd number of items — the final item will be displayed in the centre and not aligned within the grid.

Flexbox is great for laying items out in a single dimension, such as horizontally or in a column, and while it is possible to use flexbox to wrap items across multiple rows, this can lead to unwanted behaviour as shown above. To get around this we can use CSS grid to create the layout, and if required we can use flexbox to position the entire grid on the page.

In order to achieve our desired layout we are going to make use of implicit columns in CSS grid. You might be familiar with explicitly laying out grid items by specifying the row and column, but in the next section I will go over how to display a variable number of columns and items to make our grid responsive and dynamic.

Grid-template-columns

The grid-template columns property is used on a grid container to specify the columns within the grid, for example to create two columns of 200 pixels wide, we would write:

grid-template-columns: 200px 200px;

We could write this more succinctly using the grid repeat function, which can be used to specify a column a repeated number of times, with this the above could be re-written as follows:

grid-template-columns: repeat(2, 200px)

Responsiveness

This approach only works if we know how many columns our grid will have, but becomes an issue when we want the number of columns to change as the screen size becomes smaller or wider.

One way to do this would be to use media queries and set 3 columns for large screens, 2 columns for medium screens and 1 column for small screens.

However, we can also make use of CSS grids auto-fit keyword which is available within the repeat function and replaces the explicit number. The previous example becomes:

grid-template-columns: repeat(auto-fit, 200px)

This provides us with the same responsive functionality with fewer lines of code and without having to worry about media queries and break points.

The concept here is that instead of defining a set number of columns, we set a width on the parent container, and the number of columns that can fit within that container will be calculated dynamically for us. As the screen size reduces, the number of columns will automatically reduce.

We can also utilise the minmax function for the column size to allow each column to grow or shrink to fill the available space, for example if we want each column to be at least 200px wide and at most take up the entire width of the parent container we could add the following:

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

In plain English this says ‘fill the screen with as many 200px wide columns as possible and then expand each column evenly to fill up any leftover space’.

Finally, to space the items out nicely we can add a gap of 15px by adding:

grid-gap: 15px;

Grid Placement

Now that we’ve got the grid set up, it is often the case that we want to place the entire grid in the centre of the screen — this is where flexbox becomes useful, by placing the grid in a container element we can set the following properties on the container to centre the grid:

.container {
  display: flex;
  justify-content: centre;
}

This gives us the final code.

HTML:

CSS:

Creating responsive grids doesn’t have to complicated, by using the repeat and auto-fit features of CSS grid we can avoid having to use media queries and our layout will look nice and be adaptable to all screen sizes. This technique can be adapted for a variety of layouts, so experiment and see what you can make!

I am a software developer and graduate of Coder Academy Sydney. Follow me on Twitter to keep up with my journey.