Fully responsive grid, 3 lines of code

GridThe increasing number of new articles and blog posts about CSS grids are a strong indication of how powerful this new CSS layout module already is, even if it’s not fully supported by all browsers yet. We can create more complex layouts – with much less CSS code!

I came across this tutorial by Charlotte Jackson. She creates a fully responsive grid layout with just 3 lines of CSS code:

The code above is basically a short form of saying:

“Display this content as a grid. Fit as many items in a row as the browser allows (no matter how wide the browser is), but make sure individual items are at least 200px wide. Finally, space out the items in the grid by 10px.”

Justin from Responsive Design Weekly created a pen  to illustrate how these simple 3 lines create a beautifully responsive grid.

The key is the second line of code

repeat()
It will hardly come as a surprise that the repeat() notation tells the browser to repeat something. In this example we pass along two arguments: how often something should be repeated and what should be repeated (i.e. a track list).

auto-fit
The first argument could also be an integer (e.g. 3, if we wanted the item to repeat 3 times), but the keyword auto-fit tells the browser to fit in as many items on one line as possible (and at the same time ignore any empty items).

minmax
The minmax notation takes two arguments: the minimum width of an item (200px) and the maximum width of an item (1fr).

fr
A flexible length unit, short for fraction. It represents the fraction of available free space in a grid container. 1fr means that the browser should give each element one fraction of the available space.

And this is really all that’s needed to create a fully responsive grid!

About Uwe Kristen

After graduating in Scottish Literature at University of Glasgow in 1996 Uwe put down his empty glass and left the pub. He took the next airplane to New York City and started coding websites. He still codes. He still reads.

2 thoughts on “Fully responsive grid, 3 lines of code

  1. Interesting. I tested Justin’s pen on different web browsers (both mobile and desktop) and different screen resolutions. All the DIVs scaled well containing plain text and I even adjusting the numbers in the CSS between grid-gap and minmax, the DIV elements adjusted correctly including spacing. Doing tests with larger images including HD-size such as slider photos and even small logos seem to overlap over various elements in the grid, so I am not sure if the CSS would need to be adjusted to stretch the DIV which contains it. With this method, is there a way of adding some CSS properties to adjust the IMG tags for width and height or maybe a min-width and min-height?

  2. Hi Bruce, I haven’t tested this with larger images, but I would think that if you specify the image to have a width of 100% and a height of “auto” within the grid cell it should not overlap (assuming that all images have the same aspect ratio).

Leave a Reply

Your email address will not be published. Required fields are marked *

By submitting this form, you accept the Mollom privacy policy.