Mellomrom, justering og plassering i grid
Legg til mellomrom mellom gridceller med gap-x-* og gap-y-*, og juster elementer i gridområder med justify-items-* og place-items-*.
Mellomrom, justering og plassering i grid er en gratis leksjon i Tailwind CSS Academy på CoddyKit. Dette er leksjon 4 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 Tailwind CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.
Mellomrom mellom rutenettceller
Når kolonnene og radene i rutenettet er definert, er neste steg å styre mellomrommet mellom cellene. Tailwinds gap-*-verktøy tilsvarer direkte CSS-kortformen gap, som angir mellomrommet mellom både rader og kolonner samtidig. Én enkelt klasse, gap-4 (16px), gir jevnt mellomrom i alle retninger og holder oppsettet balansert uten egendefinert CSS.
<!-- Uniform gap in all directions -->
<div class="grid grid-cols-3 gap-4">
<div class="bg-blue-100 p-4 rounded">A</div>
<div class="bg-blue-100 p-4 rounded">B</div>
<div class="bg-blue-100 p-4 rounded">C</div>
<div class="bg-blue-100 p-4 rounded">D</div>
<div class="bg-blue-100 p-4 rounded">E</div>
<div class="bg-blue-100 p-4 rounded">F</div>
</div>Verktøyene gap-x-* og gap-y-*
Når De trenger forskjellig mellomrom mellom kolonner og rader, bruker De gap-x-* for vannrette mellomrom og gap-y-* for loddrette mellomrom. For eksempel gir gap-x-8 gap-y-4 stort vannrett mellomrom mellom kolonnene og mindre loddrett mellomrom mellom radene. Slik kan De finjustere den visuelle rytmen i rutenettet uavhengig i hver retning.
<!-- Wide horizontal gap, tight vertical gap -->
<div class="grid grid-cols-3 gap-x-10 gap-y-2">
<div class="bg-green-100 p-3 rounded">A</div>
<div class="bg-green-100 p-3 rounded">B</div>
<div class="bg-green-100 p-3 rounded">C</div>
<div class="bg-green-100 p-3 rounded">D</div>
<div class="bg-green-100 p-3 rounded">E</div>
<div class="bg-green-100 p-3 rounded">F</div>
</div>Justering av elementer – vannrett cellejustering
justify-items-* styrer hvordan elementer justeres vannrett i rutenettcellen sin. De fire verdiene er justify-items-start, justify-items-center, justify-items-end og justify-items-stretch (standardverdien). Når elementene strekkes, fyller de hele bredden i cellen. Sentrering er vanlig i ikonbaserte rutenett der hvert ikon skal være sentrert i kolonnen sin.
<!-- Icons centered within each grid cell -->
<div class="grid grid-cols-4 gap-6 justify-items-center">
<div class="text-4xl">📷</div>
<div class="text-4xl">🎵</div>
<div class="text-4xl">📚</div>
<div class="text-4xl">🎮</div>
</div>Justering av elementer – loddrett cellejustering
I en rutenettkontekst styrer align-items-* hvordan elementer justeres loddrett i radsporet sitt. items-start fester elementene øverst i raden, items-center sentrerer dem loddrett, og items-end skyver dem ned til bunnen. Standardverdien er items-stretch, som gjør at elementene fyller høyden i raden. Dette er annerledes enn align-items i Flexbox, men bruker de samme klassenavnene i Tailwind.
<!-- Grid row with mixed-height cells, items aligned to center -->
<div class="grid grid-cols-3 gap-4 items-center h-32">
<div class="bg-purple-200 p-2 rounded h-8">Short</div>
<div class="bg-purple-200 p-6 rounded">Tall</div>
<div class="bg-purple-200 p-2 rounded h-12">Medium</div>
</div>place-items for begge akser samtidig
Verktøyet place-items-* er en kortform som angir både align-items og justify-items samtidig. place-items-center sentrerer hvert rutenettelement perfekt, både vannrett og loddrett i cellen – en løsning som tidligere krevde to separate CSS-egenskaper. Dette er ideelt for ikonrutenett, visning av avatarer og alle rutenett der elementene skal ligge midt i cellene.
<!-- Avatar cards, each item perfectly centered in its cell -->
<div class="grid grid-cols-4 gap-4 place-items-center">
<div class="w-16 h-16 bg-red-400 rounded-full flex items-center justify-center text-white font-bold">JD</div>
<div class="w-16 h-16 bg-blue-400 rounded-full flex items-center justify-center text-white font-bold">AB</div>
<div class="w-16 h-16 bg-green-400 rounded-full flex items-center justify-center text-white font-bold">CK</div>
<div class="w-16 h-16 bg-yellow-400 rounded-full flex items-center justify-center text-white font-bold">MR</div>
</div>Justering av innhold – justering av hele rutenettet
Når den samlede bredden på rutenettkolonnene er mindre enn bredden på beholderen, plasserer justify-content-* hele rutenettblokken vannrett i beholderen. justify-center sentrerer kolonnegruppen, justify-between sprer kolonnene ut mot kantene, og justify-around legger til jevnt mellomrom rundt hver kolonne. Dette skiller seg fra justify-items, som justerer elementer inne i cellene.
<!-- Fixed-width columns centered within a wide container -->
<div class="grid gap-4 justify-center" style="grid-template-columns: repeat(3, 100px)">
<div class="bg-orange-100 p-4 rounded">A</div>
<div class="bg-orange-100 p-4 rounded">B</div>
<div class="bg-orange-100 p-4 rounded">C</div>
</div>Justering av innhold – loddrett plassering av rutenettet
align-content-* styrer hvordan hele settet med rutenettrader plasseres loddrett når den samlede radhøyden er mindre enn beholderen. content-center sentrerer alle radene loddrett, content-between sprer dem mellom toppen og bunnen, og content-evenly fordeler dem med like stort mellomrom. Dette er særlig nyttig i beholdere med fast høyde, for eksempel en dashbordwidget.
<!-- 2 rows centered in a tall container -->
<div class="grid grid-cols-2 gap-4 h-64 content-center">
<div class="bg-teal-100 p-4 rounded">Row 1, A</div>
<div class="bg-teal-100 p-4 rounded">Row 1, B</div>
<div class="bg-teal-100 p-4 rounded">Row 2, A</div>
<div class="bg-teal-100 p-4 rounded">Row 2, B</div>
</div>place-content – kortform på rutenettnivå
place-content-* er kortformen som kombinerer align-content og justify-content i ett verktøy. place-content-center sentrerer hele rutenettet i beholderen, både vannrett og loddrett. Dette er nyttig for fullskjermsrutenett med sentrering, innlastingsskjermer og alle situasjoner der De vil at selve rutenettblokken skal ligge midt i et større område.
<!-- Grid block centered inside the viewport -->
<div class="grid h-screen place-content-center gap-6" style="grid-template-columns: repeat(2, 200px)">
<div class="bg-sky-200 p-8 rounded text-center">Option A</div>
<div class="bg-sky-200 p-8 rounded text-center">Option B</div>
</div>Overstyring per element med justify-self og align-self
Noen ganger trenger De at ett bestemt element skal oppføre seg annerledes enn resten av rutenettet. justify-self-* overstyrer justify-items for én enkelt celle, og align-self-* overstyrer align-items. De kan for eksempel bruke justify-self-end til å skyve én handlingsknapp til høyre i cellen, mens alle andre celler fortsatt er venstrejustert.
<!-- Most items default, but last button right-aligned -->
<div class="grid grid-cols-3 gap-4 items-start">
<div class="bg-gray-100 p-4">Content A</div>
<div class="bg-gray-100 p-4">Content B</div>
<button class="justify-self-end bg-blue-500 text-white px-4 py-2 rounded self-center">
Action
</button>
</div>place-self – kortform per element
place-self-* er kortformen per element som kombinerer align-self og justify-self. Den kraftigste verdien er place-self-center, som sentrerer et enkelt element både vannrett og loddrett i cellen, uavhengig av hva det overordnede rutenettet angir. Dette er praktisk for å sentrere et ikon eller en lasteindikator i en rutenettcelle med fast størrelse.
<!-- One loading spinner centered in its grid cell -->
<div class="grid grid-cols-3 gap-4 h-32">
<div class="bg-gray-100 p-4 rounded">Content</div>
<div class="bg-gray-100 rounded place-self-center">
<div class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
</div>
<div class="bg-gray-100 p-4 rounded">Content</div>
</div>Komplett referanse for rutenettjustering
Her er en enkel mental modell for rutenettjustering i Tailwind: justify-items / align-items – justerer underordnede elementer i cellene (elementnivå). justify-content / align-content – plasserer hele rutenettblokken i beholderen (spornivå). justify-self / align-self – overstyrer justeringen for ett enkelt element. Kombiner disse med kortformvariantene place-* for å håndtere begge aksene samtidig.
<!-- Summary: centered grid, stretched items, one overridden -->
<div class="grid grid-cols-3 gap-6 place-content-center place-items-center h-48">
<div class="w-20 h-20 bg-indigo-200 rounded flex items-center justify-center">A</div>
<div class="w-20 h-20 bg-indigo-300 rounded flex items-center justify-center">B</div>
<!-- Override: this item aligns to end instead of center -->
<div class="w-20 h-20 bg-indigo-400 rounded flex items-center justify-center self-end">
C
</div>
</div>Hurtigsjekk
Test forståelsen Deres av konseptene i Tailwind CSS Mastery fra denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen lærte De at: gap-x-* og gap-y-* styrer vannrette og loddrette mellomrom uavhengig av hverandre, justify-items og align-items plasserer innhold i hver rutenettcelle, og justify-content og align-content plasserer hele rutenettet i beholderen. Deretter går vi videre til størrelsesverktøy som styrer bredden og høyden på elementer.
Lær deg HTML 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
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Mellomrom, justering og plassering i grid» gratis?
Ja – hele teksten i «Mellomrom, justering og plassering i grid» 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 Tailwind CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Mellomrom, justering og plassering i grid»?
Legg til mellomrom mellom gridceller med gap-x-* og gap-y-*, og juster elementer i gridområder med justify-items-* og place-items-*. Du øver på Tailwind 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 Tailwind CSS Academy?
Ingen tidligere erfaring er nødvendig. Tailwind 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 4 av 4.
Hvor lang tid tar leksjonen «Mellomrom, justering og plassering i grid»?
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 Tailwind CSS Academy-leksjonen?
Ja. Alle Tailwind 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
- Definere grid-kolonner
- Kolonne- og radspenning
- Grid-rader og automatisk plassering
- Mellomrom, justering og plassering i grid