Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lära Rutnätsavstånd och Justering | Komma Igång Med CSS Grid
CSS Grid-mästerskap

bookRutnätsavstånd och Justering

Förståelse för egenskapen gap i CSS Grid

Vid arbete med CSS Grid är kontroll över avståndet mellan rutnätsobjekt avgörande för att skapa tydliga och lättlästa layouter. Egenskapen gap erbjuder ett modernt och koncist sätt att ange avståndet mellan rader och kolumner i ett rutnät.

Till skillnad från äldre egenskaper som grid-row-gap och grid-column-gap, vilka endast tillät att ställa in rad- eller kolumnavstånd separat, gör gap det möjligt att definiera båda samtidigt eller var för sig, vilket gör din CSS mer lättläst och underhållbar.

  • Att ange gap: 20px; lägger till 20 pixlar mellan alla rader och kolumner;
  • Med gap: 20px 40px; sätts 20 pixlar mellan rader och 40 pixlar mellan kolumner.
index.html

index.html

styles.css

styles.css

copy

Hur justeringsegenskaper fungerar i CSS Grid

Justering i CSS Grid hanteras med egenskaper som justify-items och align-items, vilka styr hur objekt placeras inom sina rutnätsområden.

  • justify-items justerar objekt längs radens (inline) axel;
  • align-items justerar objekt längs kolumnens (block) axel.

Dessa egenskaper samverkar med storleken på de rutnätslinjer du definierar:

  • Om en rutnätslinje är större än innehållet inuti, avgör justeringsegenskaper om objekt startar, slutar eller centreras inom det tillgängliga utrymmet;
  • Med justify-items: center centreras alla objekt horisontellt i sina respektive rutnätsceller;
  • Med align-items: end justeras objekt vertikalt till nederkanten av sina celler.

Genom att kombinera dessa egenskaper med gap-egenskapen styr du både avståndet mellan objekt och deras placering inom varje rutnätscell.

Bästa metoder för avstånd och justering i CSS Grid

  • Använd egenskapen gap för konsekvent avstånd mellan gridobjekt;
  • Justera justify-items och align-items för att styra horisontell och vertikal justering inom gridceller;
  • Centrera eller justera objekt till slutet av celler för visuellt balanserade layouter;
  • Undvik onödiga marginaler mellan gridobjekt, låt gap hantera avståndet för förutsägbarhet och enklare underhåll.

Genom att tillämpa dessa bästa metoder säkerställs att dina CSS Grid-layouter är moderna, flexibla och enkla att uppdatera när dina designbehov förändras.

question mark

Vilka påståenden om CSS Grids gap- och justeringsegenskaper är korrekta? (Välj alla som gäller.)

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 1. Kapitel 3

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

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

bookRutnätsavstånd och Justering

Svep för att visa menyn

Förståelse för egenskapen gap i CSS Grid

Vid arbete med CSS Grid är kontroll över avståndet mellan rutnätsobjekt avgörande för att skapa tydliga och lättlästa layouter. Egenskapen gap erbjuder ett modernt och koncist sätt att ange avståndet mellan rader och kolumner i ett rutnät.

Till skillnad från äldre egenskaper som grid-row-gap och grid-column-gap, vilka endast tillät att ställa in rad- eller kolumnavstånd separat, gör gap det möjligt att definiera båda samtidigt eller var för sig, vilket gör din CSS mer lättläst och underhållbar.

  • Att ange gap: 20px; lägger till 20 pixlar mellan alla rader och kolumner;
  • Med gap: 20px 40px; sätts 20 pixlar mellan rader och 40 pixlar mellan kolumner.
index.html

index.html

styles.css

styles.css

copy

Hur justeringsegenskaper fungerar i CSS Grid

Justering i CSS Grid hanteras med egenskaper som justify-items och align-items, vilka styr hur objekt placeras inom sina rutnätsområden.

  • justify-items justerar objekt längs radens (inline) axel;
  • align-items justerar objekt längs kolumnens (block) axel.

Dessa egenskaper samverkar med storleken på de rutnätslinjer du definierar:

  • Om en rutnätslinje är större än innehållet inuti, avgör justeringsegenskaper om objekt startar, slutar eller centreras inom det tillgängliga utrymmet;
  • Med justify-items: center centreras alla objekt horisontellt i sina respektive rutnätsceller;
  • Med align-items: end justeras objekt vertikalt till nederkanten av sina celler.

Genom att kombinera dessa egenskaper med gap-egenskapen styr du både avståndet mellan objekt och deras placering inom varje rutnätscell.

Bästa metoder för avstånd och justering i CSS Grid

  • Använd egenskapen gap för konsekvent avstånd mellan gridobjekt;
  • Justera justify-items och align-items för att styra horisontell och vertikal justering inom gridceller;
  • Centrera eller justera objekt till slutet av celler för visuellt balanserade layouter;
  • Undvik onödiga marginaler mellan gridobjekt, låt gap hantera avståndet för förutsägbarhet och enklare underhåll.

Genom att tillämpa dessa bästa metoder säkerställs att dina CSS Grid-layouter är moderna, flexibla och enkla att uppdatera när dina designbehov förändras.

question mark

Vilka påståenden om CSS Grids gap- och justeringsegenskaper är korrekta? (Välj alla som gäller.)

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 1. Kapitel 3
some-alt