Useful functions

Functions that simplify creating dynamic and responsive grids.

repeat(n, value): avoids writing the same value n times manually.
minmax(min, max): defines minimum and maximum values.
auto-fit: tries to fit columns to the container’s width; if there’s extra space, it collapses gaps.
auto-fill: similar to auto-fit, but leaves empty slots if there aren’t enough items.

Example

In this example, with grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)) we create as many columns as fit (auto-fit), each column will be at least 70px, and extra space is distributed proportionally (1fr). With grid-auto-rows: minmax(50px, auto), each row has a minimum height of 50px.

ResultLiveContainer width100%

html

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
</div>

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-auto-rows: minmax(50px, auto);
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-auto-rows: minmax(50px, auto);
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

Edit the code or use the selectors: the result updates instantly.