Use multiple track names to create a responsive CSS Grid layout

As the starting point, we’ll take the layout example from “Breaking out with CSS Grid explained” by Rachel Andrew. It’s recommended that you read this article first, especially if you’re not yet familiar with named tracks in CSS Grid.

The featured example is a static layout suited for larger devices. On smaller screens it would make more sense to have a simple full width layout.

Full width and Content blocks on a 1024 px page and a 480 px mobile view, with a callout that empty space does not make sense on narrow screens. — All grid items should be full width on small sizes.

We’ll do that here.

You can download the project files with both initial fixed layout and completed responsive one. You’ll also need Pinegrow Web Editor, a free trial version will do.

Here’s a short video if you prefer to watch the action, otherwise just keep reading to see all the steps explained.

In Pinegrow open the start.html and select the div.grid element.

Click on the Edit grid icon or press CMD+G (CTRL+G on Windows and Linux) to open the CSS Grid editor:

start.html in the page preview with the CSS Grid editor button highlighted on the div.grid, and the element tree showing its child elements. — Open the CSS Grid editor

Here we can see that the only the grid columns are defined (rows are set to none).

CSS Grid editor for div.grid at MD size with a 20px gap, 150px auto rows and named track fields, beside the Content and Full width areas. — The grid with auto rows and named tracks

The grid rows are auto-generated by the browser using the Auto rows property.

Note, in a real world scenario, the Auto rows would most likely be set to auto so that the rows are sized according to the size of their content.

The layout uses named tracks to define full and main content areas using the -start and -end name prefixes.

Switch to the Style panel and click on “Content” and “Full width” grid items and explore how they are positioned using the full and main track names:

Style panel with the .grid > * rule set to grid-column main, and a callout explaining that named tracks are used for positioning. — Exploring how grid items are placed

One of unique features of Pinegrow is that we can edit multiple page views at the same time. So, let’s open a second page view showing the mobile device size:

start.html open with two page views, MD 1024 px and XS 431 px, and a callout that the XS view is selected. — Working with multiple page views

Make sure that the mobile page view is selected.

The best practice for making layouts responsive is to pick the most simple way - that’s usually the approach that requires the least additional CSS rules.

In our case, we’ll just override the grid definition and leave the CSS rules that position the grid items between named tracks as they are.

First, let’s duplicate the .grid CSS rule:

Context menu on the .grid rule in the Style panel with Duplicate highlighted and the Duplicate in stylesheet option. — Right-click on the rule to duplicate it

The new, duplicated, CSS rule is selected by default.

Style panel with the .grid rule selected and the Media query button highlighted under Selector and Media Query. — Opening the Media query selector

We’ll select a media query to target only devices smaller than 992px.

Media query picker with the smaller than 992 px option highlighted and a tooltip reading smaller than 992 px. — We’ll target browser sizes below 992px

Let’s open the CSS Grid editor by selecting either the div.grid element or any of its children and press CMD+G (CTRL+G on Windows and Linux).

The .grid CSS rule with the media query should be selected in the CSS Grid editor.

CSS Grid editor for div.grid with the CSS rule set to max-width 991 px .grid, a 20px gap and 150px auto rows, for the XS 431 px view. — The CSS Grid editor for the mobile display

There, we remove the first and last column to create a simple one column layout. The size of the single column should be 1fr, meaning all available size.

CSS Grid editor for the mobile view with a single 1fr track, and a callout to click the track to edit its names. — A simple one column layout

And now we’ll do the magic:

CSS Grid lets us give multiple names to a single track.

To achieve a single column layout for all of our grid items we name the first track full-start and main-start and the last track full-end and main-end.

Click on the track to edit its name.

Edit track name dialog with the track name full-start main-start entered and instructions that names must end in -start or -end. — Giving multiple names to a track

That will cause both .full items and normal content items to span the whole available width on mobile devices.

Mobile XS 431 px view where all grid items span the full width, beside the CSS Grid editor showing a single 1fr track. — All grid items are full width on mobile

Conclusion

We achieved our goal by adding a single CSS rule that redefines the grid layout on smaller devices while leaving the rules that position the individual grid items intact.