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.






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. ¿Cómo se hace el tamaño máximo de fuente en CSS?
  2. Cambiar el tamaño de los valores en pasos en CSS
  3. ¿Qué hace “revertir” en CSS?
  4. CSS4 es una mala idea

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

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 espac

programar

es

https://aprendeprogramando.es/static/images/programar-estilo-flexbox-simplemente-coloque-elementos-en-una-fila-con-cuadricula-css-1491-0.jpg

2024-06-13

 

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

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences