Las columnas de igual ancho en CSS Grid son un poco raras

 

 

 

Hoy en día todo es flexible. Si escribes grid-template-columns: 200px 200px 200px;, seguro que tendrás columnas del mismo ancho, pero ese es un día raro. Lo que normalmente quiere decir es tres columnas de igual ancho de fluido.

Tenemos unidades fraccionarias para eso, como grid-template-columns: 1fr 1fr fr;. Suele estar bien, pero no son muy resistentes como los píxeles. Una gran cantidad de contenido multimedia (o algo como un archivo pre, o un texto largo como una URL) puede hacer que esas columnas se estiren y eso casi nunca es lo que desea. A eso lo he llamado explosión de red. La gran idea es que el ancho mínimo de una 1frcolumna de mar auto, no 0. En otras palabras. ¡Esas columnas ensanchadas son tan estrechas como saben ser!

 

Para solucionarlo, podemos hacer como:

.el { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);}

..o podríamos acortarlo:

.el { grid-template-columns: repeat(3, minmax(0, 1fr));}

Es un poco incómodo, pero está bien. Sólo tienes que aprenderlo una vez. Es posible que ni siquiera te encuentres con esto si siempre estás configurando max-widthtus medios y manejando saltos de línea.

Si desea que sus columnas vuelvan a ser resistentes sin el minmaxbaile, puede usar porcentajes en lugar de píxeles y mantenerse flexible. ¿Pero qué porcentaje usamos? 33.33%? Eso está bien siempre y cuando no tengas ninguno gap; De lo contrario, el espacio aumentará el ancho y desbordará el contenedor. Podrías simular espacios colocando relleno dentro de las columnas, pero eso es un poco irregular y desigual.

Todo esto proviene de un gran tweet de Wes Bos:

Una guía visual para obtener columnas de igual ancho en CSS Grid pic.twitter.com/PY4yYokY18

– Wes Bos (@wesbos) 1 de mayo de 2020 Todo sobre salud dental

Sé que mucha gente se topa con esto, según la cantidad de correos electrónicos que recibo sobre el artículo sobre la explosión de la red, por lo que vale la pena interiorizar por qué todo esto es así. Probablemente debería ser más fácil, pero no tengo ninguna sugerencia particular sobre cómo podría serlo.






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

Las columnas de igual ancho en CSS Grid son un poco raras

Las columnas de igual ancho en CSS Grid son un poco raras

Hoy en día todo es flexible. Si escribes grid-template-columns: 200px 200px 200px;, seguro que tendrás columnas del mismo ancho, pero ese es un día raro. Lo

programar

es

https://pseint.es/static/images/programar-las-columnas-de-igual-ancho-en-css-grid-son-un-poco-raras-1470-0.jpg

2024-06-13

 

Las columnas de igual ancho en CSS Grid son un poco raras
Las columnas de igual ancho en CSS Grid son un poco raras

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