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:

<!doctype html>
<title>Example</title>
<style>
#grid { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 2vw;
  }
#grid > div {
  font-size: 5vw;
  padding: .5em;
  background: gold;
  text-align: center;
}
</style>
<div id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

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:

<!doctype html>
<title>Example</title>
<style>
.grid { 
  display: grid;
  grid-gap: 2vw;
  border: 1px solid black;
  margin: 10px;
  }
.grid > div {
  font-size: 5vw;
  padding: .5em;
  background: gold;
  text-align: center;
}
.auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
</style>
<div class="grid auto-fill">
  <div>1</div>
  <div>2</div>
</div>
<div class="grid auto-fit">
  <div>1</div>
  <div>2</div>
</div>

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:

<!doctype html>
<title>Example</title>
<style>
body { 
  display: grid;
  grid-template-areas: 
    "header header header"
    "nav article ads"
    "footer footer footer";
  grid-template-rows: 80px 1fr 70px;  
  grid-template-columns: 20% 1fr 15%;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  height: 100vh;
  margin: 0;
  }  
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
  body { 
    grid-template-areas: 
      "header"
      "article"
      "ads"
      "nav"
      "footer";
    grid-template-rows: 80px 1fr 70px 1fr 70px;  
    grid-template-columns: 1fr;
 }
}
header, footer, article, nav, div {
  padding: 1.2em;
  background: gold;
  }
#pageHeader {
  grid-area: header;
  }
#pageFooter {
  grid-area: footer;
  }
#mainArticle { 
  grid-area: article;      
  }
#mainNav { 
  grid-area: nav; 
  }
#siteAds { 
  grid-area: ads; 
  } 
</style>
<body>
  <header id="pageHeader">Header</header>
  <article id="mainArticle">Article</article>
  <nav id="mainNav">Nav</nav>
  <div id="siteAds">Ads</div>
  <footer id="pageFooter">Footer</footer>
</body>

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.

Create a Responsive Grid

The auto-fill Keyword

The auto-fit Keyword

Grid with Media Queries

Combining Grid with Block

The `auto-fill` Keyword

The `auto-fit` Keyword