Grilla con Flex

Este ejemplo sirve para generar una o varias filas de columnas de igual ancho usando únicamente Flexbox.

HTML

<div class="grilla">
  <article>Columna 1</article>
  <article>Columna 2</article>
  <article>Columna 3</article>
</div>

Estilos del contenedor

.grilla {
  display: flex;
  gap: 16px;
}

Estilos de las columnas

Para que todas las columnas midan lo mismo, le damos a cada article un ancho en porcentaje.

El ancho de cada columna es 100% dividido por la cantidad de columnas.

.grilla article {
  width: 33.33%;
}

Más filas

Como .grilla es una fila independiente, para agregar otra simplemente repetimos otro elemento con esa misma clase a continuación. No hace falta ningún contenedor extra: cada .grilla arma su propia fila de columnas.

<div class="grilla">
  <article>Columna 1</article>
  <article>Columna 2</article>
  <article>Columna 3</article>
</div>

<div class="grilla">
  <article>Columna 4</article>
  <article>Columna 5</article>
  <article>Columna 6</article>
</div>

Resultado