I et hvilket som helst CSS-nett har hver linje et indeksnummer som vi kan referere til å plassere rutenettelementer. Vi kan imidlertid også nevne hver av disse gridlinjene, noe som gjør det enklere å jobbe med og vedlikeholde gridoppsettene. La oss ta en titt!
Det vanligste svaret på alle gridopplæringen er "men når kan jeg bruke dette?" Og det er et rettferdig spørsmål. Faktum er: Grid er kommer, og det kommer snart her.
"CSS Grid kommer til å bli støttet av standard i Chrome og Firefox i mars 2017." - Eric Meyer
Hvis du ikke har sett på det ennå, er det nå på tide!
Når vi erklærer et rutenett, får hver linje et indeksnummer:
Merk: Med mindre layoutet er satt med retning: rtl;
, disse tallene begynner øverst til venstre på rutenettet, og arbeider seg til nederst til høyre.
Vi kan referere til disse tallene for å plassere rutenett:
.element grid-column: 2; rutenett: 3;
I dette eksemplet vårt .punkt
elementet er plassert med start på kolonnelinje 2 og radlinje 3:
Med mer komplekse nett, kan du tenke deg at å referere alt etter tall kan bli litt forvirrende. Grunnmodulen gjør at vi eksplisitt kan nevne våre linjer når vi erklærer våre grid-kolonner og rader.
La oss bruke et eksempel som de vi har brukt i hele denne serien. Her er vår grunnleggende 3 × 3 griddeklarasjon:
.grid-1 display: grid; Grid-Template-kolonner: 100px auto 100px; rutenett-mal-rader: 60px 130px 50px; grid-gap: 20px;
Nå kan vi pakke våre kolonne- og radverdier med linjenavn (uansett hva vi ønsker), ved hjelp av firkantede parenteser:
.grid-1 display: grid; rutenett-mal-kolonner: [start] 100px [senterstart] auto [siste kolonne-start] 100px [finish]; grid-template-rader: [header-start] 60px [hovedstart] 130px [main-end] 50px [rad-end]; grid-gap: 20px;
Vi kan nå posisjonere elementer med navn, i stedet for tall:
.element grid-column: senter-start; rutenett: header-start;
Noen poeng:
[main-end footer-start row-5]
etc.Når vi bevisst gjør ting, som navngi rutenettlinjer, sies det å være eksplisitt. Når noe er underforstått, men ikke direkte angitt, blir det referert til som værende implisitt. Vi har dekket eksplisitt navngi rutenettlinjer, men det er også omstendigheter der linjer blir gitt navn implisitt.
Du kan huske fra en tidligere opplæring at det er mulig å definere rutenett.
Vi kan definere fire gridområder som dette:
.grid-1 / * ... eksisterende stilarter * / grid-template-områder: "header header header" "main main sidebar" "footer footer footer";
Dette gir oss følgende:
Navngi et rutenettområde Overskrift
Tilordner automatisk navn til de fire grenselinjene også. Rå linjene rundt det blir header-start
og header-end
, og også de to kolonnelinjene blir også header-start
og header-end
. Det samme gjelder for de andre områdene, som er gitt linjenavn Hoved-start
, hoved-end
, sidebar-start
og så videre.
Merk: Ser på ting i omvendt, eksplisitt å legge til navngitte linjer i samme format (header-start
og header-end
) vil opprette et navngitt gridområde på Overskrift
.
Vi kan bruke disse linjenavnene akkurat som tidligere, for å plassere elementer. Og igjen eksisterer de i tillegg til noen navn du definerer deg selv, og de opprinnelige linjene indeksnumrene.
Det er det for dette raske tipset! Husk: bli vant til å navngi dine linjer og områder for enklere gridhåndtering og vedlikehold.