Responsive oppsett med flex og grid
Bytt mellom kolonne- og radoppsett ved ulike breakpoints med responsive prefikser som md:flex-row og lg:grid-cols-3.
Responsive oppsett med flex og grid er en gratis leksjon i Tailwind CSS Academy på CoddyKit. Dette er leksjon 2 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.
Grunnleggende om responsive oppsett
De to viktigste teknikkene for oppsett i Tailwind – Flexbox og Grid – kan begge kombineres naturlig med responsive bruddpunktprefikser. Grunnideen er enkel: Definer mobiloppsettet først med verktøyklasser uten prefiks, og legg deretter til overstyringer med bruddpunktprefiks for å endre oppsettet på større skjermer. Når du forstår hvordan du bytter mellom flex og grid, og hvordan du endrer de viktigste egenskapene deres ved bruddpunkter, har du verktøyene du trenger for å bygge alle typer responsive design.
<!-- Core pattern: column on mobile, row on desktop -->
<div class="flex flex-col lg:flex-row gap-6">
<aside class="w-full lg:w-64 shrink-0">Sidebar</aside>
<main class="flex-1">Main content</main>
</div>flex-col til flex-row ved bruddpunkter
Det mest brukte responsive flex-mønsteret er å veksle mellom retninger. flex flex-col md:flex-row stabler underordnede elementer loddrett på telefoner og legger dem vannrett på nettbrett. Bruk dette på hero-seksjoner (tekst over bildet på mobil, side ved side på stasjonære skjermer), funksjonsrader og sammenligningskort. De underordnede elementene beholder sin naturlige høyde i kolonnemodus og strekkes til samme høyde i radmodus.
<!-- Hero: stacked on mobile, side by side on desktop -->
<div class="flex flex-col md:flex-row items-center gap-8 px-6 py-12">
<!-- Text block -->
<div class="flex-1 text-center md:text-left">
<h1 class="text-3xl md:text-4xl font-bold mb-4">Build Better Apps</h1>
<p class="text-gray-600 mb-6">Everything you need to ship fast.</p>
<button class="bg-blue-600 text-white px-6 py-3 rounded-lg">Get Started</button>
</div>
<!-- Image -->
<div class="flex-1 w-full md:w-auto">
<div class="aspect-video bg-gradient-to-br from-blue-400 to-indigo-600 rounded-2xl"></div>
</div>
</div>Responsive antall grid-kolonner
For innholdsgrider øker man nesten alltid antallet kolonner ved større bruddpunkter. Start med én kolonne på mobil for best lesbarhet, legg til en kolonne nummer to på små nettbrett, og bruk det fulle kolonneantallet på stasjonære skjermer. grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 er det typiske mønsteret for produktlister, grider med teammedlemmer og samlinger av innholdskort.
<!-- Responsive card grid: 1→2→3→4 columns -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
<div class="bg-white border rounded-xl p-4 shadow-sm">Card 1</div>
<div class="bg-white border rounded-xl p-4 shadow-sm">Card 2</div>
<div class="bg-white border rounded-xl p-4 shadow-sm">Card 3</div>
<div class="bg-white border rounded-xl p-4 shadow-sm">Card 4</div>
<div class="bg-white border rounded-xl p-4 shadow-sm">Card 5</div>
<div class="bg-white border rounded-xl p-4 shadow-sm">Card 6</div>
<div class="bg-white border rounded-xl p-4 shadow-sm">Card 7</div>
<div class="bg-white border rounded-xl p-4 shadow-sm">Card 8</div>
</div>Responsive kolonnespenn
Inne i en grid med et fast antall kolonner lar responsive col-span-verdier bestemte elementer ta opp ulik plass ved forskjellige bruddpunkter. Et fremhevet kort kan for eksempel spenne over alle fire kolonnene på en stasjonær skjerm, men reduseres til én kolonne på mobil. Mønsteret col-span-1 sm:col-span-2 lg:col-span-4 gir denne oppførselen – elementet har normal størrelse på mobil og utvides gradvis med skjermstørrelsen.
<!-- Featured item spans all columns on large screens -->
<div class="grid grid-cols-4 gap-4">
<!-- Featured: full width on large, half on sm, 1 on mobile -->
<div class="col-span-4 sm:col-span-2 lg:col-span-4 bg-blue-500 text-white p-6 rounded-xl">
Featured Content
</div>
<div class="col-span-2 sm:col-span-1 bg-gray-100 p-4 rounded-xl">A</div>
<div class="col-span-2 sm:col-span-1 bg-gray-100 p-4 rounded-xl">B</div>
<div class="col-span-2 sm:col-span-1 bg-gray-100 p-4 rounded-xl">C</div>
<div class="col-span-2 sm:col-span-1 bg-gray-100 p-4 rounded-xl">D</div>
</div>Responsiv størrelse på mellomrom
Mellomrommene mellom flex- eller grid-elementer bør også være responsive. Små mellomrom fungerer på mobil, der plassen er begrenset, mens større mellomrom på stasjonære skjermer gir mer visuell luft. gap-3 md:gap-6 lg:gap-10 skalerer mellomrommet gradvis. Responsiv størrelse på mellomrom er særlig viktig i grider for markedsføringsseksjoner, der luft er et sentralt designelement.
<!-- Gap scales with viewport -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 md:gap-6 lg:gap-10">
<div class="bg-purple-100 p-4 rounded-xl text-center">
<div class="text-3xl mb-2">🎨</div>
<h3 class="font-semibold">Design</h3>
</div>
<div class="bg-purple-100 p-4 rounded-xl text-center">
<div class="text-3xl mb-2">⚙️</div>
<h3 class="font-semibold">Build</h3>
</div>
<div class="bg-purple-100 p-4 rounded-xl text-center">
<div class="text-3xl mb-2">🚀</div>
<h3 class="font-semibold">Launch</h3>
</div>
</div>Bytte mellom flex og grid ved bruddpunkter
Du kan bytte selve visningstypen ved bruddpunkter ved å gå fra flex til grid. Dette er uvanlig, men kan være nyttig: En vannrett flex-rad på mobil (for en navigasjonslinje med pilleformede elementer) blir til en grid på stasjonære skjermer (for en funksjonsoversikt). Trikset er at du ikke kan blande flex- og grid-klasser på samme element – den senere klassen vinner, og begge angir display.
<!-- Horizontal scroll on mobile, grid on desktop -->
<!-- Mobile: flex row with overflow scroll -->
<div class="flex gap-3 overflow-x-auto pb-2 md:grid md:grid-cols-4 md:overflow-visible">
<div class="flex-none w-40 md:w-auto bg-white border rounded-xl p-4 text-center">
<div class="text-2xl">📊</div>
<div class="text-sm font-medium mt-1">Analytics</div>
</div>
<div class="flex-none w-40 md:w-auto bg-white border rounded-xl p-4 text-center">
<div class="text-2xl">💬</div>
<div class="text-sm font-medium mt-1">Chat</div>
</div>
<div class="flex-none w-40 md:w-auto bg-white border rounded-xl p-4 text-center">
<div class="text-2xl">📁</div>
<div class="text-sm font-medium mt-1">Files</div>
</div>
<div class="flex-none w-40 md:w-auto bg-white border rounded-xl p-4 text-center">
<div class="text-2xl">⚙️</div>
<div class="text-sm font-medium mt-1">Settings</div>
</div>
</div>Responsiv plassering og justering
Justeringsegenskaper har også nytte av responsive prefikser. Innhold kan være sentrert på mobil og venstrejustert på stasjonære skjermer. text-center md:text-left er det klassiske eksempelet. For flex-beholdere sentrerer justify-center md:justify-between elementene på mobil, men fordeler dem mot kantene på stasjonære skjermer – ideelt for en navigasjonslinje som reduseres til sentrerte pilleformede elementer på mobil.
<!-- CTA section: centered on mobile, spaced on desktop -->
<div class="flex flex-col sm:flex-row items-center sm:justify-between gap-4 bg-indigo-50 rounded-2xl p-6">
<div class="text-center sm:text-left">
<h3 class="font-bold text-lg">Ready to start?</h3>
<p class="text-gray-600 text-sm">Join 10,000+ users today.</p>
</div>
<div class="flex gap-3">
<button class="bg-indigo-600 text-white px-5 py-2 rounded-lg">Get Started</button>
<button class="border border-indigo-300 text-indigo-700 px-5 py-2 rounded-lg">Learn More</button>
</div>
</div>Responsiv rekkefølge på elementer
Tailwinds order-*-verktøyklasser endrer den visuelle rekkefølgen på underordnede flex- og grid-elementer uten å endre rekkefølgen i DOM-en. Dermed kan tekstinnholdet komme først i HTML-en (bedre for SEO og skjermlesere), mens bildet vises først visuelt på stasjonære skjermer ved hjelp av lg:-order-1 eller lg:order-first. Responsiv rekkefølge er et kraftig verktøy for HTML med innholdet først, som likevel gir et visuelt oppsett der designet prioriteres.
<!-- Image appears first on desktop via responsive order -->
<div class="flex flex-col lg:flex-row gap-8 items-center">
<!-- Text: first in DOM, second visually on desktop -->
<div class="lg:order-2 flex-1 text-center lg:text-left">
<h2 class="text-2xl font-bold mb-3">Our Approach</h2>
<p class="text-gray-600">We believe in human-centered design that prioritizes clarity and performance.</p>
</div>
<!-- Image: second in DOM, first visually on desktop -->
<div class="lg:order-1 flex-1">
<div class="aspect-video bg-gradient-to-br from-teal-400 to-emerald-600 rounded-2xl"></div>
</div>
</div>Responsive kolonner med auto-fit
For virkelig flytende grider som oppretter så mange kolonner som får plass, kan du kombinere Tailwinds vilkårlige verdier med CSS Grids auto-fill eller auto-fit. Denne fremgangsmåten trenger ingen bruddpunkter – griden bestemmer selv antallet kolonner ut fra tilgjengelig plass og minste bredde for elementene. grid-cols-[repeat(auto-fill,minmax(240px,1fr))] oppretter en grid som tilpasser seg selv, der elementene er minst 240px brede.
<!-- Self-adapting grid: no breakpoints needed -->
<div class="grid gap-4" style="grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))">
<div class="bg-white border rounded-xl p-4 shadow-sm">
<h3 class="font-semibold">Auto Item 1</h3>
<p class="text-sm text-gray-500 mt-1">Adapts to available space</p>
</div>
<div class="bg-white border rounded-xl p-4 shadow-sm">
<h3 class="font-semibold">Auto Item 2</h3>
<p class="text-sm text-gray-500 mt-1">Adapts to available space</p>
</div>
<div class="bg-white border rounded-xl p-4 shadow-sm">
<h3 class="font-semibold">Auto Item 3</h3>
<p class="text-sm text-gray-500 mt-1">Adapts to available space</p>
</div>
<div class="bg-white border rounded-xl p-4 shadow-sm">
<h3 class="font-semibold">Auto Item 4</h3>
<p class="text-sm text-gray-500 mt-1">Adapts to available space</p>
</div>
</div>Responsive sidekolonneoppsett
Oppsett for appskall med sidekolonner trenger responsiv håndtering: Sidekolonnen plasseres under innholdet på mobil og ved siden av det på stasjonære skjermer. Mønsteret er en flex-beholder som går fra kolonne til rad: flex flex-col lg:flex-row. Sidekolonnen får en fast bredde på stasjonære skjermer: w-full lg:w-64 shrink-0, mens hovedinnholdet fyller den resterende plassen med flex-1 min-w-0.
<!-- Responsive app shell -->
<div class="flex flex-col lg:flex-row min-h-screen">
<!-- Sidebar: full-width on mobile, fixed on desktop -->
<aside class="w-full lg:w-64 shrink-0 bg-gray-900 text-white p-4 lg:p-6">
<div class="font-bold text-lg mb-4">MyApp</div>
<nav class="flex lg:flex-col gap-2">
<a href="#" class="px-3 py-2 rounded-lg bg-gray-800 text-sm">Dashboard</a>
<a href="#" class="px-3 py-2 rounded-lg hover:bg-gray-800 text-sm transition-colors">Projects</a>
<a href="#" class="px-3 py-2 rounded-lg hover:bg-gray-800 text-sm transition-colors">Settings</a>
</nav>
</aside>
<!-- Main content -->
<main class="flex-1 min-w-0 p-6 bg-gray-50">
<h1 class="text-2xl font-bold">Dashboard</h1>
<p class="text-gray-600 mt-2">Welcome back!</p>
</main>
</div>Testing av responsive oppsett
Slik tester du responsive oppsett effektivt: Bruk nettleserens modus for responsiv utforming i DevTools til å veksle mellom forhåndsinnstilte enhetsstørrelser. Test ved de nøyaktige grensene for bruddpunktene (for eksempel 639px rett under sm og 640px ved sm) for å avdekke spesialtilfeller. Test også ved svært små (320px) og svært store (2560px) bredder for å sikre at oppsettet ikke bryter sammen i ytterpunktene. Tailwinds JIT-motor genererer bare klassene du bruker, så ubrukte bruddpunktvarianter fører ikke til unødvendig CSS.
<!-- Debugging aid: borders at each breakpoint reveal layout structure -->
<div class="border border-red-500 sm:border-yellow-500 md:border-green-500 lg:border-blue-500 xl:border-purple-500 p-4">
<p class="text-sm text-gray-500">Border color changes at each breakpoint:
red=xs, yellow=sm, green=md, blue=lg, purple=xl</p>
<div class="flex flex-col md:flex-row gap-4 mt-3">
<div class="border border-dashed border-gray-400 flex-1 p-3 rounded">Column A</div>
<div class="border border-dashed border-gray-400 flex-1 p-3 rounded">Column B</div>
</div>
</div>Kort test
Test forståelsen din av konseptene i Tailwind CSS Mastery fra denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen lærte De: flex-col til flex-row ved et bruddpunkt er den grunnleggende vekslingen for responsiv layout, grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 oppretter et klassisk responsivt kortnett, og order-*-verktøy gjør det mulig at DOM-rekkefølgen avviker fra den visuelle rekkefølgen for SEO-vennlige responsive layouter. Neste tema er responsiv typografi og justering av mellomrom.
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 «Responsive oppsett med flex og grid» gratis?
Ja – hele teksten i «Responsive oppsett med flex og 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 «Responsive oppsett med flex og grid»?
Bytt mellom kolonne- og radoppsett ved ulike breakpoints med responsive prefikser som md:flex-row og lg:grid-cols-3. 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 2 av 4.
Hvor lang tid tar leksjonen «Responsive oppsett med flex og 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
- Tailwinds breakpoint-system
- Responsive oppsett med flex og grid
- Responsiv typografi og avstand
- Vise og skjule elementer responsivt