Explicit grid

This is a layout system where the grid is explicitly defined using grid-template-rows and grid-template-columns.

Rows and columns are declared directly in the grid.
No additional rows or columns are created unless items force them (in which case the implicit grid comes into play).
Ideal for predictable layouts, where the exact number of rows and columns is known in advance.

Example

In this dynamic example, since we do not handle the sizes of rows and columns that are created implicitly, these will take the height and width of the child.

Select example:

6 items7 items

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-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-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.