Rask Tips Navn CSS-rutenettene, bare i sak

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!

Rutenettet kommer

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!

Rutenettnumre

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:

Eksplisitt rutenettnavn

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:

  • Disse navnene kan skreddersys til dine egne beskrivende behov, så tenk logisk om hva som vil hjelpe deg med å gjenkjenne og huske områder av rutenettet.
  • De opprinnelige linjenumrene forblir i drift, så du kan fortsatt bruke dem.
  • Du kan deklarere flere navn for en linje, for eksempel: [main-end footer-start row-5] etc.
  • Selv om du nevner rutenettene dine, er du ikke forpliktet til å bruke dem, så det er en god "bare i tilfelle" vane å komme inn i.

Implisitt Grid Line Name

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.

Slutten

Det er det for dette raske tipset! Husk: bli vant til å navngi dine linjer og områder for enklere gridhåndtering og vedlikehold.