grid & inline-grid

El contenedor se define con display: grid o display: inline-grid, y sus hijos directos se convierten en grid items que se distribuyen en la cuadrícula.

grid: El contenedor se comporta como un bloque que ocupa todo el ancho disponible.
inline-grid: El contenedor se comporta como un elemento en línea, ocupando solo el espacio necesario.

Ejemplo

En este ejemplo dinámico, podremos comprobar cómo se ajustan los elementos hijos, en función del valor de display.

Selecciona display:

gridinline-grid

ResultadoEn vivoAncho del contenedor100%

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;
}

Edita el código o usa los selectores: el resultado cambia al instante.