Multicolumna

El layout multicolumna reparte el contenido en columnas, como en un periódico. Es el tercer sistema de layout de CSS junto a flex y grid.

columns: atajo de column-count y column-width. Con un ancho, crea tantas columnas como quepan.
column-gap: separación entre columnas.
column-rule: línea divisoria entre columnas, con la misma sintaxis que border.
column-span: all: hace que un elemento, como un título, ocupe todas las columnas.
break-inside: avoid: evita que un elemento quede partido entre dos columnas.

Ejemplo

Cambia columns en el contenedor. Con un número fijas cuántas columnas hay; con un ancho como 10rem, el navegador crea las que quepan. Prueba esta última opción moviendo el control de ancho.

Selecciona columns:

12310rem

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 class="child">7</div>
  <div class="child">8</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 class="child">7</div>
  <div class="child">8</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  column-gap: 1rem;
  column-rule: 1px solid #a9cdf6;
  columns: 2;
  padding: 0.5rem;
}

.child {
  break-inside: avoid;
  margin-bottom: 0.75rem;
  padding: 1rem;
}

.child:nth-child(3n) {
  padding-block: 2rem;
}

.container {
  border: 1px solid #2b7de0;
  column-gap: 1rem;
  column-rule: 1px solid #a9cdf6;
  columns: 2;
  padding: 0.5rem;
}

.child {
  break-inside: avoid;
  margin-bottom: 0.75rem;
  padding: 1rem;
}

.child:nth-child(3n) {
  padding-block: 2rem;
}

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