Ikke bruk tomt eller lavt innhold for design system rutenett eksempler

0
15

Dave og jeg hadde Jen Simmons på ShopTalk den andre dagen. Jen snakket om Egenverdi Web Design og hvordan en av de viktigste prinsippene for det er nett med rader og kolonner som ikke nødvendigvis endre på samme pris, eller de som har grunnleggende ulike regler for hvordan de oppfører seg.

Ta For eksempel denne (kunstige) rutenett:

.grid {
visning: rutenett;
grid-mal-kolonner: 1fr minmax(50px, 100px) 20% auto;
}

Hver av disse kolonnene vil oppføre seg annerledes.

Jeg bare pakke hodet mitt om dette, og definitivt ikke fullt ut forstår det. Her er hva det ser ut for meg, nummerert 1-4 basert på “styrke” (antar jeg?) av bredden.

.grid {
visning: rutenett;
grid-mal-kolonner:
1fr /* #4 – Svakeste, vil fylle plassen */
minmax(50px, 100px) /* #3 – Vil bare begynne å endre når andre kolonner kraft */
20% /* #1 – Bestemt størrelse, jevn */
auto /* #2 – Ubegrenset størrelse, som utelukkende er basert på innhold, pushy */
;
}

Dette er mye forskjellig fra en ganske lang historie av hvordan vi har satt opp rutenett kolonner i det siste. Float-basert nett vanligvis bruker prosenter (en bestemt størrelse) for å angi kolonner. Samme med inline-block-baserte nett, vanligvis.

Selv med rutenett, hvis du konfigurere alle kolonner med alle prosenter eller alle brøk enheter, vil du sannsynligvis ha en jevn rutenett der innholdet inne vil ikke rote med dimensjonering. Men Jen er å si at det er interessant å ha et rutenett der innholdet har a si i hvordan de størrelse. Omfavne det. Høres gøy for meg.

Men uansett, sier du sette opp et rutenett som bruker blandet verdier for kolonnebreddene slik som dette. Ikke gjør det med helt tomme kolonner, ellers vil du få en falsk følelse av hvordan disse kolonnene vil oppføre seg.

Bare se på denne demoen, der disse fire nettene har nøyaktig samme oppsett og alle som er annerledes er mengden tekst i hver kolonne.

Se Penn Forskjellige Kollaps Priser av Ulike kolonnebredde Verdier av Chris Coyier (@chriscoyier) på CodePen.

Kul ‘ n’weird.