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

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.