Enkel Kalt Grid Områder

0
21

Jeg tenker på heter rutenett områder i CSS Nett som bring-your-own-syntaktisk sukker. Du trenger ikke absolutt trenger dem (du vil kunne express rutenett plassering på andre måter), men det kan gjøre at plassering mer intuitiv. Og hei, hvis jeg tar feil om det, korrekt meg i kommentarfeltet.

Si at du har satt opp en 3-kolonne nettet:

.grid {
visning: rutenett;
grid-gap: 1rem;
grid-mal-kolonner:
200px 1fr 1fr;
}

Ingen rader definert det, de som er implisitt og vil fremstå som nødvendig. Vi kan definere dem, må vi rett og slett ikke, fordi de, som de fleste situasjoner i web-design, vi bryr meg ikke hvor høy elementene er — høyden vil vokse som trengs for å romme innholdet.

Nå, hvordan kan vi plassere noe i det aller øverste venstre posisjon i nettet? Vi kan fortelle rutenett for å plassere den der som dette:

.item {
grid-kolonnen: 1 / 2; /* begynn ved første rutenett kolonne, linje, og slutten på den andre */
}

Som fungerer, selv om det .elementet bedre bli den første barn .rutenett. Ellers, noe annet kan implisitt være plassert der og .elementet vil sparke ned til neste åpne rad. Hvis vi ønsket å være super sikker på å plassere den øverst til venstre, kunne vi gjøre den raden som godt:

.item {
grid-kolonnen: 1 / 2;
grid-rad: 1 / 2;
}

Nå vil det være i øverste venstre for sikker, selv om andre elementer som er eksplisitt satt det (de vil bare overlapp). Vi kan også forkorte opp ting med grid-området eiendom:

.item {
grid-området: 1 / 1 / 2 / 2;
}

Alle de 1 og 2 kan være intuitivt nok for nå, men tallene blir litt mye i mer komplekse nett som involverer både kolonne og rad plassering.

Sjekk denne. Mens vi definerer kolonnene, kan vi nevne dem med en separat eiendel:

.grid {
visning: rutenett;
grid-gap: 1rem;
grid-mal-kolonner:
200px 1fr 1fr;
grid-mal-områder:
“pro a b”
“pro c d”;
}

Hver sitert gruppe i grid-mal-områdene er det en rad. Inne er navn jeg bare gjort opp. Kan være omtrent hva som helst, så lenge det er fornuftig for deg. Se hvordan ordet “pro” er gjentatt to ganger der på to rader? Det er viktig, som det er å si at vi kan plassere et rutenett element der den verdien “pro” er, og det vil være i den første av tre kolonner og går over to rader. Ganske intuitivt, ja?

Vi plassere det slik som dette:

.pro-funksjoner {
/* heller enn */
grid-området: 1 / 1 / 2 / 3;
/* nå kan vi gjøre */
grid-området: pro;
}

Her er den enkle eksempel:

Se Penn Enkel Kalt Grid Områder av Chris Coyier (@chriscoyier) på CodePen.

Ønsker å få enda mer beskrivende med et rutenett? Prøve å tegne det i CSS kommentarer.

Jetpack WordPress plugin går på dette nettstedet, slår ikke bare relaterte innlegg nedenfor, men den sosiale deling av koblinger ovenfor, sikkerhet og backup, Markdown-støtte, søk nettstedet, kommentar skjemaet, positing til sosiale nettverk-tilkoblinger, og mer!