Använd inte tomma eller lågt innehåll för din design grid system exempel

0
25

Dave och jag hade Jen Simmons på ShopTalk den andra dagen. Jen var att tala om Inneboende webbdesign och hur en av de grundläggande principerna i det rutnät med rader och kolumner som inte nödvändigtvis förändras i samma takt eller de som i huvudsak har olika regler för hur de beter sig.

Ta till exempel detta (påhittade) grid-inställningar:

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

Var och en av dessa kolumner kommer att bete sig annorlunda.

Jag är bara inslagning min chef om detta, och definitivt inte till fullo förstår den. Här är vad det verkar som mig, numrerade 1-4 baserat på “styrkan” (antar jag?) av bredden.

.grid {
display: nätet.
grid-template-kolumner:
1fr /* #4 – de Svagaste kommer att fylla återstående utrymme */
minmax(50px, 100px) /* #3 – Kommer bara att börja ändra när andra kolumner kraft den */
20% /* #1 – Bestämd storlek, stadig */
auto /* #2 – Obestämd storlek, helt och hållet baserat på innehåll, påträngande */
;
}

Detta är mycket annorlunda från en ganska lång historia av hur vi har satt upp galler kolumner i det förflutna. Float-baserade nät vanligtvis att använda procentsatser (en bestämd storlek) för att ange kolumner. Samma sak med inline-block-baserade nät, typiskt.

Även med nätet, om du sätter upp alla dina kolumner med alla procentsatser eller alla fraktionerad enheter, skulle du troligen att ha en stadig nätet där innehållet inuti inte bråka med dimensionering. Men Jen är att säga att det är intressant att ha ett nät där innehållet har något att säga i hur de storleken. Omfamna den. Låter kul för mig.

Men hur som helst, säg att du sätter upp ett rutnät som använder blandade värden för kolumnbredd som denna. Inte göra det med helt tomma kolumner, annars kommer du att få en falsk känsla av hur dessa kolumner kommer att bete sig.

Titta bara på denna demo där dessa fyra nät har exakt samma setup och allt som är annorlunda är att mängden text i varje kolumn.

Se Pennan Olika Kollaps Priser av Olika kolumnbredd Värden av Chris Coyier (@chriscoyier) på CodePen.

Cool ‘ n ‘ ‘weird.