Estilo Flexbox “simplemente coloque elementos en una fila” con cuadrícula CSS

Se me ocurrió mientras hablábamos de Flexbox y gapque una de las razones por las que a veces utilizamos Flexbox es para colocar algunas cajas en fila y espaciarlas un poco.

Mi cerebro todavía recurre a flexbox en esa situación, y con gap, probablemente continuará funcionando. Sin embargo, vale la pena señalar que la cuadrícula puede hacer lo mismo a su manera especial.

Como esto:

.grid {  display: grid;  gap: 1rem;  grid-auto-flow: column;} 

Todos parecen tener el mismo ancho allí, pero eso es sólo porque no hay contenido en ellos. Con el contenido, verás que los cuadros comienzan a empujarse entre sí según el ancho natural de ese contenido. Si necesita ejercer cierto control, siempre puede establecer // widthen los elementos que caen en esas columnas, o configurarlos con pero sin establecer el número real de columnas, y luego dejar que digan el ancho.min-widthmax-widthgrid-template-columnsmin-content

.grid {  display: grid;  gap: 1rem;  grid-auto-flow: column;  grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));}

Las rejillas flexibles son las más geniales.

Otra idea… si sólo quieres que toda la cuadrícula sea tan ancha como el contenido (es decir, menos del 100% o automático, si es necesario), entonces ten en cuenta que eso display: inline-grid;existe.