Create a Responsive Grid
Grid has some "responsiveness" capabilities where fixed sized grid items will shift position according to the viewport size. You can also combine grid with media queries to present a different grid for smaller viewports.
Grid layout provides the
auto-fit keywords that enable you to create a grid with as many tracks of a certain size that will fit the container. This can result in a responsive grid, where the grid items reposition themselves as you resize the browser.
Example of using
Preview to see the example in a larger viewport, then resize your browser. If you're currently on a small device, try it out again when you're on a desktop or laptop.
The relevant code is this bit:
This sets the columns to a minimum size of 150 pixels, and a maximum of the remaining space. The tracks will repeat as many times as needed to fit into the container.
repeat() function repeats the track definition for the number of times provided by the first parameter. Using
auto-fill makes it repeat for as many tracks that will fit the container.
The size of those tracks is specified by the second parameter. In this case, we use
minmax(150px, 1fr) to specify that the minimum column size is
150px and the maximum is
auto-fit keyword works almost the same as
auto-fill. The difference is that
auto-fit collapses any empty tracks at the end of the placement, whereas
The best way to demonstrate this is by comparing the two together:
Using only two small grid items helps to demonstrate this concept. The
auto-fill grid keeps the empty tracks at the end at the size specified. But
auto-fit collapses the empty track, therefore resulting in the filled tracks stretching out to fill the space.
Grid with Media Queries
One of the powerful things about grid layout is that you can create a different layout within seconds (as we saw previously).
This makes grid layout ideal for media queries. We can simply rearrange the values in our ASCII art and wrap the result in a media query.
Here's an example:
This is a 3 column layout on a larger viewports, and it collapses to a single column on smaller ones. So this example will look different depending on the size of your screen. In most cases this will probably be collapsed, as the viewport on the editor widget is small.
Click on the Preview button to view it in a wider viewport (if your screensize allows). Resize the browser window to see the layout change once it passes the
In any case, here's the relevant code for the 3 column layout (for wider viewports):
And here's the relevant code for the "mobile" version:
So it's just a matter of rearranging the values of the
In this case, we wrap the "mobile" version in a media query, like this:
Note that we've also had to adjust the values of the
grid-template-columns properties to allow for the new layout. In particular, there should only be one column, and it should take up all available space. And because all grid items will be stacked, we explicitly define 5 rows and their heights.
Combining Grid with Block
Depending on your layout requirements, there's nothing to stop you from changing the mobile version to
display: block. Like this:
This will work similar to the above example, however, by default, the items will be stack in their source order. In the above example, the mobile version has
ads, but if we had used
display: block, the
nav would've been above
Also, if you use this method, you might also need to add some margins etc to compensate for any lack of gutters that were included in the grid version.