CSS Academy · leksjon

Gap og grid-plassering

Legg til avstand mellom grid-celler med gap, og plasser elementer med grid-column og grid-row.

Leksjon 3 av 413 trinn

Gap og grid-plassering er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Mellomrom i CSS Grid

Egenskapen gap angir mellomrommet mellom rader og kolonner i rutenettet. Den erstatter den eldre egenskapen grid-gap og fungerer også i Flexbox.

<div class="grid">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
  <div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
  <div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">5</div>
  <div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">6</div>
</div>

row-gap og column-gap

Angi mellomrom mellom rader og kolonner uavhengig av hverandre:

<div class="grid" style="display:grid;grid-template-columns:repeat(3, 1fr);">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
  <div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
  <div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">5</div>
  <div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">6</div>
</div>

Linjenumre i rutenettet

CSS Grid nummererer linjene fra og med 1. Et rutenett med tre kolonner har kolonnelinjene 1, 2, 3 og 4. Negative numre teller fra slutten: -1 er den siste linjen, og -2 er den nest siste.

grid-column og grid-row

Plasser elementer manuelt ved hjelp av linjenumre med grid-column og grid-row:

<div style="display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:60px;gap:8px;">
  <div class="header" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (spans all 3 columns, row 1)</div>
  <div class="main" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (spans 2 columns, row 2)</div>
</div>

Nøkkelordet span

Bruk span for å angi hvor mange spor et element skal dekke, i stedet for absolutte linjenumre:

<div style="display:grid;grid-template-columns:repeat(4, 60px);grid-auto-rows:60px;gap:8px;">
  <div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
  <div class="featured" style="background:#4f8cff22;border:1px solid #4f8cff;padding:4px;">Featured (span 2x2)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
</div>

Negative linjenumre

Negative indekser teller fra slutten. 1 / -1 dekker alltid hele rutenettbredden, uansett hvor mange kolonner det er:

<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;">
  <div class="full-width" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Full width (grid-column: 1 / -1)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Item</div>
  <div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Item</div>
</div>

Kortformen grid-area

grid-area angir alle de fire verdiene for plassering i rutenettet i én egenskap: row-start / column-start / row-end / column-end.

<div style="display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:60px;gap:0;">
  <div class="hero" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Hero (row 1 start, col 1 start, row 2 end, last column)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
</div>

Automatisk plassering

Elementer som ikke er plassert eksplisitt, plasseres automatisk i den neste tilgjengelige cellen i henhold til algoritmen grid-auto-flow. Nettleseren fyller som standard cellene fra venstre mot høyre og ovenfra og ned.

justify-items og align-items i Grid

I en rutenettbeholder justerer justify-items celleinnholdet vannrett, mens align-items justerer det loddrett. Begge har som standard verdien stretch.

<div class="grid" style="min-height:120px;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;width:fit-content;">centered, top-aligned item</div>
</div>

justify-self og align-self

Individuelle rutenettelementer kan overstyre beholderens justering ved hjelp av justify-self og align-self:

<div style="display:grid;grid-template-columns:1fr;min-height:120px;">
  <div class="featured-card" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Stretched horizontally, centered vertically</div>
</div>

Overlappende rutenettelementer

Flere elementer kan bruke den samme rutenettcellen. Bruk z-index for å kontrollere hvilket element som vises øverst. Dette gjør det mulig å lage lagdelte oppsett, for eksempel bilde med tekst oppå.

<div style="display:grid;grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(2, 60px);">
  <div class="image" style="background:#4f8cff44;border:1px solid #4f8cff;">Image layer</div>
  <div class="caption" style="background:rgba(0,0,0,0.6);color:#fff;align-self:end;padding:4px 8px;">Caption overlay</div>
</div>

Hurtigsjekk

Et element har grid-column: 2 / span 3. Hvilke kolonner opptar det i et rutenett med fem kolonner?

Besvar den i den interaktive leksjonen

Oppsummering

gap legger til mellomrom mellom rutenettceller. Elementer plasseres ved hjelp av linjenumre med grid-column og grid-row. Nøkkelordet span angir hvor mange spor som skal dekkes. Bruk 1 / -1 for alltid å dekke alle kolonnene. Rutenettelementer kan overlappe ved hjelp av z-index.

Gratis å komme i gang

Lær deg CSS med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 40
Leksjoner: 159

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Gap og grid-plassering» gratis?

Ja – hele teksten i «Gap og grid-plassering» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Gap og grid-plassering»?

Legg til avstand mellom grid-celler med gap, og plasser elementer med grid-column og grid-row. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med CSS Academy?

Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Gap og grid-plassering»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?

Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til CSS Academy