Lær, hvordan du bruger CSS-gitter til nemt at bygge komplekse layouts.

Placering af elementer på en webside kan være meget kompliceret, når man arbejder med komplekse layouts. Det er her, CSS-gitteret kommer til nytte. Det er et layoutsystem designet til at forenkle processen med at skabe komplekse layouts.

Hvordan hjælper det dig? I modsætning til traditionelle layoutmetoder, der kun tillader dig at placere elementer i enten rækker eller kolonner, tilbyder CSS-gitteret dig det bedste fra begge verdener - en 2D-tilgang ved hjælp af rækker og kolonner.

Gitterbeholdere og genstande

Du kan anvende CSS-gitteregenskaber på to hovedtyper af elementer: forældre og børn. Når du indstiller egenskaben display til "gitter" for et overordnet element, omdanner det elementet til en gitterbeholder. Ethvert underordnet element i denne gitterbeholder bliver et gitterelement, der arver de anvendte gitteregenskaber.

Sådan er det repræsenteret:

Et gitterelement kan også blive en gitterbeholder. Du kan nu henvise til layoutet som et indlejret gitter - et gitter i et gitter. Hovedgitterbeholderen omtales nu som det ydre gitter, mens den genstandsvendte gitterbeholder bliver til et indre gitter.

instagram viewer

Hvert af disse gitter fungerer uafhængigt af det andet, hvilket betyder, at egenskaberne indstillet for et indre gitter ikke påvirker layoutet af det ydre gitter og omvendt.

Sådan ser det ud:

At mestre forholdet mellem gitterbeholdere og emner er afgørende for opbygning af todimensionelle layouts effektivt.

Husk, at der er gitteregenskaber for gitterbeholdere, mens andre er til gitterelementer.

Gitterlinjer og spor

Før du begynder at bruge CSS-gitteret, er der to nøglebegreber, du bør være bekendt med:

  1. Gitterlinjer: Gitterlinjer henviser til de vandrette og lodrette linjer, der danner gitteret i et CSS-gitterlayout. De specificerer start- og slutpunkterne for rækker og kolonner, og hjælper med at organisere, hvor tingene foregår på nettet. Disse linjer er som kanterne på kasser; de har tal, der hjælper dig med at referere til elementerne, når du placerer dem. Her repræsenterer den røde stiplede linje dem:
  2. Gitterspor: De er hullerne mellem gitterlinjer, der definerer rækker og kolonner. De er ligesom byggestenene i gitterlayoutet. I ovenstående billede repræsenterer det farvede område inden for hvert element gittersporet.

Tænk på gitterlinjer og -spor som byggestenene i et gitterlayout, som linjerne på et ark millimeterpapir. Når en vandret gitterlinje skærer en lodret gitterlinje, danner den en kasseformet celle. Disse celler fungerer som beholdere, hvor du kan placere dine gitterelementer.

CSS Grid Container Egenskaber

Dette er egenskaber, du kan anvende på gitterbeholderen for at organisere layoutet og hjælpe med at placere elementer i den. Som tidligere nævnt er en af ​​dem visningsegenskaben sat til gitter. Her er flere:

Gitter skabelon

Denne egenskab definerer størrelsen af ​​rækker og kolonner. Du kan dimensionere disse egenskaber ved hjælp af pixels, procenter eller brøkenheden (fr). Du kan også bruge søgeord som f.eks auto, minmax(), og gentage() for at øge fleksibiliteten.

  • gitter-skabelon-rækker: Indstiller rækkehøjder.
  • gitter-skabelon-kolonner: Definerer kolonnebredder.

Her er nogle eksempler:

Brug af pixel:

.grid-container {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 250px 250px;
}

Brug af procenter:

.grid-container {
grid-template-columns: 25% 50% 25%;
grid-template-rows: 50% 50%;
}

Ved at bruge fr:

.grid-container {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr;
}

Brug af auto og minmax() søgeord:

.grid-container {
grid-template-columns: autominmax(150px, 1fr) auto;
grid-template-rows: 100pxauto;
}

Brug af repeat() til konsistent størrelse:

.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
}

Automatisk placering og gitterskabelonområder

Automatisk placering: Automatisk placering er som at lade gitteret bestemme, hvor genstande skal placeres. Hvis du ikke angiver nøjagtige positioner, vil gitteret automatisk placere elementer i den rækkefølge, de vises i markeringen. Dette er nyttigt, når du har mange elementer og ønsker, at de skal fylde gitteret jævnt.

Netskabelonområder: Tænk på gitterskabelonområder som at skabe et layout ved hjælp af navngivne zoner. Det er ligesom at navngive rum på en plantegning. Du kan henvise til disse områdenavne, når du placerer gitterelementer. For eksempel:

.grid-container {
grid-template-areas:'headerheaderheaderheader'
 'sidebarmainmainright'
 'sidebarcontentcontentright'
 'footerfooterfooterfooter';
}

Dette layout er som et gitter med tre kolonner og fire rækker. Der er to rækker til hovedindholdsområdet. De mærkede områder inkluderer "header", "sidebar", "content" og "footer". I de næste afsnit lærer du, hvordan du bruger disse områdeetiketter i egenskaberne for hvert gitterelement.

Justering i CSS Grid

Du kan bruge justeringsegenskaber til at kontrollere placeringen af ​​gitterelementer i deres gitterceller. Egenskaberne er:

  • retfærdiggøre-punkter: Styrer vandret justering af elementer i deres gittercelle.
    • Værdier: start, slut, center og stræk.
  • align-elementer: Styrer lodret justering af elementer i deres gittercelle.
    • Værdier: start, slut, center og stræk.
  • retfærdiggøre-indhold: Justerer hele gitteret i beholderen langs den vandrette akse.
    • Værdier: start, slut, center, stræk, mellemrum-mellem, mellemrum-omkring og mellemrum-jævnt.
  • align-indhold: Justerer hele gitteret i beholderen langs den lodrette akse.
    • Værdier: start, slut, center, stræk, mellemrum-mellem, mellemrum-omkring og mellemrum-jævnt.

Her er et eksempel:

.grid-container {
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
justify-content: space-between;
align-content: center;
}

I dette eksempel vil elementer centreres både vandret og lodret i deres celler. Pladsen vil blive fordelt jævnt mellem søjlerne i hele gitteret, og gitteret vil centrere lodret i beholderen.

Gittergab

Gittergab refererer til mellemrummet mellem rækker og kolonner i et gitterlayout. Det hjælper med at skabe visuel adskillelse og tilføjer lidt plads mellem gitterelementer.

Det gitter-gab egenskab giver dig mulighed for at indstille afstanden mellem rækker og kolonner. Du kan bruge forskellige enheder til at definere det, såsom pixels (px), procenter (%), em-enheder (em) og mere.

.grid-container {
grid-gap: 20px;
}

I dette eksempel har gitterbeholderen to kolonner med et mellemrum på 20 pixel mellem dem. Denne afstand adskiller søjlerne visuelt og forbedrer layoutet.

CSS Grid Item Egenskaber

Her er nogle nøgleegenskaber, der styrer adfærden af ​​individuelle gitterelementer i et CSS-gitterlayout, sammen med eksempler:

gitter-række-start og gitter-række-slut:

  • Definerer start- og slutrækkelinjerne for et element.
  • Værdier kan være linjenumre, "span n" eller "auto". 
.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}

Denne kode placerer Gitterelement 1 fra anden rækkes linje til fjerde rækkes linje.

gitter-kolonne-start og gitter-kolonne-slut:

  • Definerer start- og slutkolonnelinjerne for et element.
  • Værdier kan være linjenumre, "span n" eller "auto". 
.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}

Denne kode placerer Gitterelement 2 fra den første kolonnelinje til den tredje kolonnelinje.

gitter-område:

  • Angiver størrelsen og positionen af ​​et gitterelement i gitteret ved at henvise til de navngivne gitterlinjer i gitter-skabelon-områder.
  • Som tidligere nævnt er foruddefinerede områdenavne allerede i brug med gitter-skabelon-områder ejendom. Her er et eksempel på, hvordan du bruger det sammen med gitter-område. 
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.content {
grid-area: content;
}
.right {
grid-area: right;
}
.footer {
grid-area: footer;
}

Her er resultatet:

retfærdiggøre-selv:

  • Justerer individuelle elementer vandret i dens celle.
  • Værdier kan være start, slut, center og stræk. 
.grid-item-5 {
justify-self: center;
}

Denne kode centrerer vandret Gitterelement 5 i sin celle.

aligne-selv:

  • Juster individuelle elementer lodret i dens celle.
  • Værdier kan være start, slut, center og stræk. 
.grid-item-1 {
align-self: end;
}

Denne kode justeres Gitterelement 1 til bunden af ​​sin celle.

Du er velkommen til at kombinere og tilpasse disse egenskaber for at skabe det layout og udseende, du ønsker for hvert gitterelement i dit CSS-gitter.

Oprettelse af responsive layouts ved hjælp af CSS-gitter

Brug af CSS-gitter til skabe responsive layouts er vigtigt for at sikre, at din webside tilpasser sig problemfrit til forskellige skærmstørrelser og enheder. Du kan anvende disse metoder:

  • Medieforespørgsler: Du kan bruge medieforespørgsler at anvende forskellige gitterlayouts afhængigt af skærmstørrelser. Det kan for eksempel være nødvendigt at omarrangere gitterelementer eller justere kolonnebredder for mindre skærme.
  • Fleksible enheder: Brug relative enheder såsom procenter og fr for at aktivere gitterelementer og kolonner til at justere proportionalt med tilgængelig plads.
  • minmax(): Brug minmax() funktion til at angive en række størrelser for gitterkolonner eller rækker. Det sikrer, at genstande ikke bliver for små eller for store på forskellige skærme.

Husk at justere kolonner og andre elementer som mellemrum mellem gitterelementer, skriftstørrelser og margener. Det sikrer et ensartet og veldesignet layout, der fungerer godt på forskellige enheder.

Udforsk mulighederne for CSS Grid Layout

Ved at omfavne fleksibiliteten og kraften i CSS-gitteret vil du give dig mulighed for at lave layouts, der ikke kun ser godt ud, men også tilpasser sig problemfrit til kravene fra moderne webdesign. Så dyk ned i gitterets verden, udforsk mulighederne og løft dine webudviklingsevner.

Når du dykker ned i layoutsystemer, vil du måske sammenligne andre layoutmetoder med CSS-gitter. Det kan du gøre med CSS Flexbox-modulet. Dette vil hjælpe dig med at lære at beslutte, når du arbejder på et projekt.