Gebruik niet (bijna) leeg van inhoud voor uw design system grid voorbeelden

0
20

Dave en ik hadden Jen Simmons op ShopTalk de andere dag. Jen werd gesproken over de Intrinsieke Web Design en hoe een van de belangrijkste leerstellingen van het netten met rijen en kolommen die niet per se veranderen in hetzelfde tempo of degenen die hebben in wezen verschillende regels voor hoe ze zich gedragen.

Neem bijvoorbeeld dit (verzonnen) grid setup:

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

Elk van deze kolommen zullen zich anders gedragen.

Ik ben gewoon wikkelen mijn hoofd over dit, en zeker niet volledig begrijpt. Hier is wat het lijkt voor mij, genummerd 1-4 gebaseerd op de “kracht” (denk ik?) van de breedte.

.raster {
display: grid;
grid-template-kolommen:
1fr /* #4 – de Zwakste, vul de resterende ruimte */
minmax(50px, 100px) /* #3 – Zal alleen veranderen wanneer andere kolommen dwingen */
20% /* #1 – Definitieve omvang, continu */
auto /* #2 – Onbepaalde maat, dat volledig gebaseerd is op de inhoud, opdringerige */
;
}

Dit is veel anders dan in een heel lange geschiedenis van hoe we raster kolommen in het verleden. Float-gebaseerde netwerken meestal gebruik van percentages (van een bepaalde grootte) in te stellen kolommen. Hetzelfde met inline-block-gebaseerde netwerken, typisch.

Zelfs met een raster, als u alle kolommen met alle percentages of alle fractionele eenheden, zou je waarschijnlijk een vast rooster voor in dat de inhoud niet knoeien met de maat. Maar Jen is te zeggen dat het interessant zijn om een grids waar de inhoud heeft een stem in hoe zij grootte. Omarm het. Klinkt leuk voor mij.

Maar hoe dan ook, zeggen dat u nu een raster dat gebruik maakt van gemengde waarden voor de kolom breedte als deze. Doe dat niet met geheel lege kolommen, anders krijg je een vals gevoel van hoe deze kolommen wordt gedragen.

Kijk maar naar deze demo waar deze vier netten hebben exact dezelfde setup en alles dat anders is, is de hoeveelheid tekst in elke kolom.

Zie de Pen Verschillende Ineenstorting van de Tarieven van de Verschillende Breedte van de Kolom de Waarden van Chris Coyier (@chriscoyier) op CodePen.

Cool ‘ n’weird.