Se me ocurrió mientras hablábamos de flexbox y gap
que una de las razones por las que a veces buscamos flexbox es colocar algunas cajas en una fila y espaciarlas un poco.
Mi cerebro todavía busca flexbox en esa situación, y con gap
, probablemente seguirá haciéndolo. Sin embargo, vale la pena señalar que la cuadrícula puede hacer lo mismo de una manera especial.
Como esto:
.grid {
display: grid;
gap: 1rem;
grid-auto-flow: column;
}
Todos se ven del mismo ancho allí, pero eso es solo porque no hay contenido en ellos. Con el contenido, verá que los cuadros comienzan a presionarse entre sí en función del ancho natural de ese contenido. Si necesita ejercer algún control, siempre puede configurar width
/ min-width
/ max-width
en los elementos que caen en esas columnas, o configúrelos con grid-template-columns
pero sin establecer el número real de columnas, dejando que el min-content
dictar el ancho.
.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 frescas.
Otro pensamiento … si solo desea que toda la cuadrícula sea tan amplia como el contenido (es decir, menos del 100% o automática, si es necesario), tenga en cuenta que display: inline-grid;
es una cosa.