No use contenido vacío o bajo para los ejemplos de cuadrícula del sistema de diseño | Programar Plus

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, tome 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.

Solo estoy envolviendo mi cabeza sobre esto, y definitivamente no lo entiendo completamente. 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 configuramos columnas de cuadrícula en el pasado. Las cuadrículas basadas en 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 sus columnas con todos los porcentajes o todas las unidades fraccionarias, es probable que tenga una cuadrícula estable en la que el contenido interno no interfiera con el tamaño. Pero Jen dice que es interesante tener cuadrículas en las que el contenido pueda opinar sobre el tamaño. Abrázalo. Suena divertido para mí.

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

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

Vea las diferentes tasas de colapso de lápiz de diferentes valores de ancho de columna por Chris Coyier (@chriscoyier) en CodePen.

Genial y raro.