No utilice contenido vacío o bajo para los ejemplos de cuadrícula de su sistema de diseño

Dave y yo tuvimos a Jen Simmons en ShopTalk el otro día. Jen estaba hablando sobre el diseño web intrínseco y cómo uno de sus principios básicos son las cuadrículas con filas y columnas que no necesariamente cambian al mismo ritmo o que tienen reglas esencialmente diferentes sobre cómo se comportan.

Por ejemplo, tomemos esta configuración de cuadrícula (artificial):

.grid {  display: grid;  grid-template-columns: 1fr minmax(50px, 100px) 20% auto;}

Cada una de esas columnas se comportará de manera diferente.

Estoy pensando en esto y definitivamente no lo entiendo del todo. Esto es lo que me parece, numerado del 1 al 4 según la “fuerza” (¿supongo?) del ancho.

.grid {  display: grid;  grid-template-columns:     1fr                  /* #4 - Weakest, will fill remaining space */    minmax(50px, 100px)  /* #3 - Will only start changing when other columns force it */    20%                  /* #1 - Definite size, steady */    auto                 /* #2 - Indefinite size, entirely based on content, pushy */  ;}

Esto es muy diferente de una historia bastante larga de cómo hemos configurado las columnas de la cuadrícula en el pasado. Las cuadrículas flotantes suelen utilizar porcentajes (un tamaño definido) para establecer columnas. Lo mismo ocurre con las cuadrículas basadas en bloques en línea, por lo general.

Incluso con la cuadrícula, si configura todas las columnas con todos los porcentajes o todas las unidades fraccionarias, probablemente tendrá una cuadrícula estable en la que el contenido interno no afectará el tamaño. Pero Jen dice que es interesante tener cuadrículas donde el contenido tenga voz y voto sobre su tamaño . Abrázalo. Me parece divertido.

Pero de todos modos, supongamos que está configurando una cuadrícula que usa valores mixtos para anchos de columna como este. No hagas esto con columnas totalmente vacías; de lo contrario, tendrás una idea falsa de cómo se comportarán esas columnas.

Simplemente mire esta demostración donde estas cuatro cuadrículas tienen exactamente la misma configuración y lo único que es diferente es la cantidad de texto en cada columna.

Genial y raro.