Skip to content
About Blog Learn Explore Patterns Case studies
  • Home
  • All patterns
  • Layout patterns

RAM (Repeat, Auto, Minmax)

Nov 3, 2021

For this seventh example, combine some of the concepts you've already learned about to create a responsive layout with automatically-placed and flexible children. Pretty neat. The key terms to remember here are repeat, auto-(fit|fill), and minmax(), which you remember by the acronym RAM.

All together, it looks like:

.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

You are using repeat() again, but this time, using the auto-fit keyword instead of an explicit numeric value. This enables auto-placement of these child elements. These children have a base minimum value of 150px with a maximum value 1fr, meaning on smaller screens, they will take up the full 1fr width, and as they reach 150px wide each, they will start to flow onto the same line.

With auto-fit, any completely empty tracks will collapse to 0 and the filled tracks will grow to take up their space. However, if you change this to auto-fill, empty tracks will take up the same amount of space they would do if filled:

.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
<div class="parent white">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </div>
  
.parent {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Open demo
Last updated: Nov 3, 2021 — Improve article
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.