Fluid grid

Es un sistema de diseño en el que la página o interfaz se organiza usando una cuadrícula con columnas y anchos flexibles, que se adaptan dinámicamente al tamaño de la pantalla.

Filas y columnas con tamaños relativos (%, fr, auto ...).
Ideal para diseños que requieren adaptabilidad en distintos dispositivos y resoluciones.

Ejemplo

En este ejemplo, usamos grid-template-columns para definir el número de columnas y sus respectivos anchos, pero esta vez se trata de anchos proporcionales en función del ancho del contenedor. De esta forma, la primera columna ocupa el 50% del contenedor y las otras dos se reparten el ancho restante, en función de su fr.

Con gap, establecemos la separación de filas y columnas al mismo tiempo.

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

.child {
  padding: 1rem;
}

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

.child {
  padding: 1rem;
}

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