Repeat, Auto, Minmax aka RAM

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>

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 1em;
}

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

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