grid & inline-grid

The container is defined with display: grid or display: inline-grid, and its direct children become grid items that are distributed within the grid.

grid: The container behaves as a block that takes up all the available width.
inline-grid: The container behaves as an inline element, occupying only the necessary space.

Example

In this dynamic example, we can see how the child elements adjust depending on the value of display.

Select display:

gridinline-grid

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: 1fr 2fr 1fr;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 2fr 1fr;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

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