Flexbox-like “simplemente coloque elementos en una fila” con cuadrícula CSS | Programar Plus

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.

(Visited 4 times, 1 visits today)