DEV Community

Cover image for Repeat, Auto, Minmax aka RAM
Aslam Shah
Aslam Shah

Posted on

Repeat, Auto, Minmax aka RAM

#css #cssgrid

RAM is a great layout pattern for grid layouts in general. It stands for Repeat, Auto, Minmax which entails to the css grid property of grid-template-columns to have flexible children and placed automatically in the parent without having to write any extra responsive css. You can use this pattern for images, cards, items etc.

The code looks like below:

<div class="parent">
    <div class="child">A</div>
    <div class="child">B</div>
    <div class="child">C</div>
    <div class="child">D</div>
  </div>
Enter fullscreen mode Exit fullscreen mode 
.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 1em;
}
Enter fullscreen mode Exit fullscreen mode

You can use auto-fill or `auto-fit' depending upon your usecase.

Cover Photo: https://unsplash.com/@helloimnik

Top comments (0)