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-fill and 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.
The auto-fill Keyword
Example of using auto-fill:
Click 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.
The 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 1fr.
The auto-fit Keyword
The 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 auto-fill doesn't.
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 575px breakpoint.
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 grid-template-areas property.
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-rows and 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 nav underneath ads, but if we had used display: block, the nav would've been above ads.
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.