Implicit grid

This is a layout system where the grid automatically expands to accommodate elements that don’t fit into the explicitly defined grid.

Rows or columns not declared in the explicit grid are generated automatically.
We can use grid-auto-rows or grid-auto-columns to define the size of the implicit rows/columns being created.
Ideal when the number of elements is dynamic or unknown beforehand.

Example

In this dynamic example, we can see how an implicit row is created, which takes the height from grid-auto-rows, and how an implicit column is created with its width defined by grid-auto-columns.

Select grid-auto:

grid-auto-rowsgrid-auto-columns

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: 5rem;
  grid-template-columns: 20% 1fr 2fr;
  grid-template-rows: 4rem;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-auto-rows: 5rem;
  grid-template-columns: 20% 1fr 2fr;
  grid-template-rows: 4rem;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

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