Web Development: CSS Grid Layout: Going Responsive

Monday, October 3, 2016

CSS Grid Layout: Going Responsive

Throughout this series we’ve become familiar with Grid syntax, learned about some efficient ways of laying out elements on a page, and said goodbye to some old habits. In this tutorial we’re going to apply all of that to some practical responsive web design.

Media Queries

Let’s use the demo from where we left off last time.

It comprises two declared grids; our main grid and the nested grid within one of our items. We can control when these grids come into effect using media queries, meaning we can completely redefine our layout at different viewport widths.

Begin by duplicating the first grid declaration, and wrapping the duplicate in a mobile-first media query (I’m using 500px as the breakpoint, but that’s completely arbitrary):

.grid-1 {
    /* grid declaration styles */
}


@media only screen and (min-width: 500px) {

    .grid-1 {
        /* grid declaration styles */
    }

}

Now, within the first declaration we’ll change how our grid is defined, placing the whole thing in a single column. We’ll list just one column in our grid-template-columns rule, make sure the four rows we now have are defined with grid-template-rows, and arrange the layout with grid-template-areas:

.grid-1 {
    display: grid;
    width: 100%;
    margin: 0 auto;
    
    grid-template-columns: 1fr;
    grid-template-rows: 80px auto auto 80px;
    grid-gap: 10px;
    
    grid-template-areas:    "header"
                            "main"
                            "sidebar"
                            "footer";
}

We’ve also made our grid-gap just 10px by default, to account for smaller screens.

Here’s what that gives us. You’ll notice that we’re also using our media query to change the padding and font-size on our .grid-1 div items.

Our Nested Grid

That takes care of the main layout, but we still have the nested grid which remains stubbornly in its two column layout under all circumstances. To fix that we’ll do exactly the same as before, but using a different breakpoint to suggest a content-first approach:

.item-2 {
    /* grid declaration styles */
}


@media only screen and (min-width: 600px) {

    .item-2 {
        /* grid declaration styles */
    }

}

Check out the end result on CodePen.

A couple of things to note here:

As we’ve said before, you can visually arrange grid items irrespective of the source order, and media queries mean we can have different visual orders for different screen widths. However, nesting has to remain true to the source; our nested grid items must always be visually and actually descendants of their parent.
CSS transitions don’t have any influence over Grid layout. When our media queries kick in, and our grid areas move to their new positions, you won’t be able to ease them into place.

auto-fill and minmax()

Another (sort of) responsive approach to Grid is well suited to masonry-type layouts; blocks which size and flow automatically, depending on the viewport.

auto-fill

Our approach up until now has been to dictate how many tracks there are and watch the items fit accordingly. That’s what is happening in this demo; we have grid-template-columns: repeat(4, 1fr); which says “create four columns, and make each one a single fraction unit wide”.

With the auto-fill keyword we can dictate how wide our tracks are and let Grid figure out how many will fit in the available space. In this demo we’ve used grid-template-columns: repeat(auto-fill, 9em); which says “make the columns 9em wide each, and fit as many as you can into the grid container”.

Note: this also takes our gutters, the grid-gap, into account.

The container in these demos has a dark background to show clearly how much space is available, and you’ll see that it hasn’t been completely filled in the last example. So how do we do that?

minmax()

The minmax() function allows us to set a minimum and a maximum size for a track, enabling Grid to work within them. For example we could setup three columns, the first two being 1fr wide, the last being a maximum of 1fr, but shrinking no smaller than 160px:

grid-template-columns: 1fr 1fr minmax(160px, 1fr);

All the columns will shrink as you squish the window, but the last column will only be pushed so far. Take a look.

Back to our auto-fill demo, if we were to change our column width for minmax(9em, 1fr) Grid would place as many 9em tracks as possible, but then expand them to a maximum of 1fr until the container is filled:

Caveat: Grid will recalculate the tracks upon page reload (try squishing the browser window and hitting refresh) but it won’t do so on window resize. Media queries can be used to alter the values, but they still won’t play nice with window resize.

Conclusion

Let’s wrap up with some bullets:

Media queries can help us completely rearrange Grid layouts by redefining grid-template-areas (and other things) for different scenarios.
CSS transitions don’t have any effect on changes made to the grid layout.
The auto-fill keyword is useful for filling up grid containers.
The minmax() function complements auto-fill nicely, making sure containers are properly filled, but doesn’t give us “responsiveness” in the true sense of the word.

With the lessons learned in this series, you’re armed to go out and start playing with Grid! Stay tuned for more Grid tutorials, practical exercises, solutions to common layout problems, and updates.

Useful Resources

Rachel Andrew’s Grid by Example 29: minmax() and spanning columns and rows
Video: Rachel Andrew (obviously) demonstrating minmax() on the Tuts+ homepage layout
W3C Editor’s Draft: auto-fill
W3C Editor’s Draft: minmax()

Web Development