Todo es flexible en estos días. Si tú escribes grid-template-columns: 200px 200px 200px;, claro, tendría columnas de igual 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;. Eso suele estar bien, pero no son muy resistentes como los píxeles. Una gran cantidad de medios (o algo así como un <pre>, o un fragmento de texto largo como una URL) puede hacer que esas columnas se estiren y eso casi nunca es lo que desea. Lo he llamado explosión de rejilla. La gran idea es que el ancho mínimo de un 1fr la columna es auto, no 0. En otras palabras,. ¡esas columnas ensanchadas están siendo tan estrechas como saben ser!
Para arreglar eso, 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. Solo tienes que aprenderlo una vez. Es posible que nunca te encuentres con esto si siempre estás configurando max-width en sus medios y manejo de saltos de línea.
Si desea que sus columnas vuelvan a ser resistentes sin la minmax dance, podría usar porcentajes en lugar de píxeles y permanecer flexible. Pero que porcentaje usas? 33.33%? Eso está bien siempre y cuando no tengas ninguna gap — de lo contrario, el espacio aumentará el ancho y desbordará el contenedor. Podría falsificar espacios poniendo 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 encuentra con esto, según la cantidad de correos electrónicos que recibo sobre el artículo de la explosión de la cuadrícula, por lo que vale la pena internalizar 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 ser.