Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Gittermellemrum og Justering | Kom Godt I Gang Med CSS Grid
CSS Grid-mesterskab

bookGittermellemrum og Justering

Forståelse af gap-egenskaben i CSS Grid

Ved arbejde med CSS Grid er styring af afstanden mellem grid-elementer afgørende for at skabe rene og overskuelige layouts. gap-egenskaben giver en moderne og kortfattet måde at angive afstanden mellem rækker og kolonner i et grid.

I modsætning til ældre egenskaber som grid-row-gap og grid-column-gap, der kun tillod individuel angivelse af række- eller kolonneafstand, gør gap det muligt at definere begge på én gang eller separat, hvilket gør din CSS mere læsbar og vedligeholdelsesvenlig.

  • Angivelse af gap: 20px; tilføjer 20 pixels afstand mellem alle rækker og kolonner;
  • Brug af gap: 20px 40px; sætter 20 pixels mellem rækker og 40 pixels mellem kolonner.
index.html

index.html

styles.css

styles.css

copy

Sådan fungerer justeringsegenskaber i CSS Grid

Justering i CSS Grid håndteres med egenskaber som justify-items og align-items, der styrer, hvordan elementer placeres inden for deres grid-områder.

  • justify-items justerer elementer langs række- (inline-)aksen;
  • align-items justerer elementer langs kolonne- (blok-)aksen.

Disse egenskaber interagerer med størrelsen på de grid-spor, du definerer:

  • Hvis et grid-spor er større end indholdet indeni, bestemmer justeringsegenskaberne, om elementer placeres i starten, slutningen eller centreret i det tilgængelige rum;
  • Brug af justify-items: center centrerer alle elementer vandret i deres respektive grid-celler;
  • Brug af align-items: end justerer elementer lodret til bunden af deres celler.

Ved at kombinere disse egenskaber med gap-egenskaben styrer du både afstanden mellem elementer og deres placering i hver grid-celle.

Bedste praksis for afstand og justering i CSS Grid

  • Brug gap-egenskaben for ensartet afstand mellem grid-elementer;
  • Juster justify-items og align-items for at kontrollere horisontal og vertikal justering inden for grid-celler;
  • Centrer eller juster elementer til enden af celler for at skabe visuelt balancerede layouts;
  • Undgå unødvendige marginer mellem grid-elementer, lad gap håndtere afstanden for forudsigelighed og nemmere vedligeholdelse.

Anvendelse af disse bedste praksisser sikrer, at dine CSS Grid-layouts er moderne, fleksible og nemme at opdatere, når dine designbehov ændrer sig.

question mark

Hvilke udsagn om CSS Grid gap- og justeringsegenskaber er korrekte? (Vælg alle der passer.)

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 1. Kapitel 3

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Suggested prompts:

Can you explain the difference between `gap` and using margins for spacing in CSS Grid?

How do I use `justify-items` and `align-items` together for complex layouts?

What are some common mistakes to avoid when working with spacing and alignment in CSS Grid?

Awesome!

Completion rate improved to 9.09

bookGittermellemrum og Justering

Stryg for at vise menuen

Forståelse af gap-egenskaben i CSS Grid

Ved arbejde med CSS Grid er styring af afstanden mellem grid-elementer afgørende for at skabe rene og overskuelige layouts. gap-egenskaben giver en moderne og kortfattet måde at angive afstanden mellem rækker og kolonner i et grid.

I modsætning til ældre egenskaber som grid-row-gap og grid-column-gap, der kun tillod individuel angivelse af række- eller kolonneafstand, gør gap det muligt at definere begge på én gang eller separat, hvilket gør din CSS mere læsbar og vedligeholdelsesvenlig.

  • Angivelse af gap: 20px; tilføjer 20 pixels afstand mellem alle rækker og kolonner;
  • Brug af gap: 20px 40px; sætter 20 pixels mellem rækker og 40 pixels mellem kolonner.
index.html

index.html

styles.css

styles.css

copy

Sådan fungerer justeringsegenskaber i CSS Grid

Justering i CSS Grid håndteres med egenskaber som justify-items og align-items, der styrer, hvordan elementer placeres inden for deres grid-områder.

  • justify-items justerer elementer langs række- (inline-)aksen;
  • align-items justerer elementer langs kolonne- (blok-)aksen.

Disse egenskaber interagerer med størrelsen på de grid-spor, du definerer:

  • Hvis et grid-spor er større end indholdet indeni, bestemmer justeringsegenskaberne, om elementer placeres i starten, slutningen eller centreret i det tilgængelige rum;
  • Brug af justify-items: center centrerer alle elementer vandret i deres respektive grid-celler;
  • Brug af align-items: end justerer elementer lodret til bunden af deres celler.

Ved at kombinere disse egenskaber med gap-egenskaben styrer du både afstanden mellem elementer og deres placering i hver grid-celle.

Bedste praksis for afstand og justering i CSS Grid

  • Brug gap-egenskaben for ensartet afstand mellem grid-elementer;
  • Juster justify-items og align-items for at kontrollere horisontal og vertikal justering inden for grid-celler;
  • Centrer eller juster elementer til enden af celler for at skabe visuelt balancerede layouts;
  • Undgå unødvendige marginer mellem grid-elementer, lad gap håndtere afstanden for forudsigelighed og nemmere vedligeholdelse.

Anvendelse af disse bedste praksisser sikrer, at dine CSS Grid-layouts er moderne, fleksible og nemme at opdatere, når dine designbehov ændrer sig.

question mark

Hvilke udsagn om CSS Grid gap- og justeringsegenskaber er korrekte? (Vælg alle der passer.)

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 1. Kapitel 3
some-alt