Tailwind CSS Academy · Lektion

Responsiva layouter med flex och grid

Växla mellan kolumn- och radlayouter vid olika brytpunkter med responsiva prefix som md:flex-row och lg:grid-cols-3.

Lektion 2 av 413 steg

Responsiva layouter med flex och grid är en gratis lektion i Tailwind CSS Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Tailwind CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.

Grunderna i responsiva layouter

De två viktigaste layoutteknikerna i Tailwind — Flexbox och Grid — kan båda kombineras naturligt med responsiva brytpunktsprefix. Grundidén är enkel: definiera först mobillayouten med verktyg utan prefix och lägg sedan till överskrivningar med brytpunktsprefix för att ändra layouten på större skärmar. Om du förstår hur du växlar mellan flex och grid och hur du ändrar deras viktigaste egenskaper vid brytpunkter har du verktygen för att bygga valfri responsiv 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 till flex-row vid brytpunkter

Det vanligaste responsiva flexmönstret är att växla riktning. flex flex-col md:flex-row staplar underordnade element vertikalt på telefoner och placerar dem horisontellt på surfplattor. Använd detta i hero-sektioner (text ovanför bilden på mobilen och bredvid bilden på skrivbordet), funktionsrader och jämförelsekort. De underordnade elementen behåller sin naturliga höjd i kolumnläge och sträcks ut så att de får samma höjd i radläge.

<!-- 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>

Responsivt antal gridkolumner

För innehållsgitter är mönstret nästan alltid att öka antalet kolumner vid större brytpunkter. Börja med en kolumn på mobilen för bästa läsbarhet, lägg till en andra kolumn på mindre surfplattor och nå det fullständiga antalet kolumner på skrivbordet. grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 är det typiska mönstret för produktlistor, gitter med teammedlemmar och bibliotek med innehållskort.

<!-- 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>

Responsiva kolumnspann

Inom ett grid med ett fast antal kolumner låter responsiva col-span-värden specifika element ta upp olika mycket utrymme vid olika brytpunkter. Ett utvalt kort kan exempelvis sträcka sig över alla fyra kolumner på skrivbordet men begränsas till en kolumn på mobilen. Mönstret col-span-1 sm:col-span-2 lg:col-span-4 skapar detta beteende — elementet har normal storlek på mobilen och expanderar gradvis med skärmstorleken.

<!-- 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 storlek på mellanrum

Mellanrummen mellan flex- eller grid-element bör också vara responsiva. Täta mellanrum fungerar på mobilen där utrymmet är begränsat, medan större mellanrum på skrivbordet ger mer visuell luft. gap-3 md:gap-6 lg:gap-10 skalar mellanrummet gradvis. Responsiv storlek på mellanrum är särskilt viktigt i gitter för marknadsföringssektioner, där tomrum är en central designdel.

<!-- 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>

Växla mellan flex och grid vid brytpunkter

Du kan växla själva visningstypen vid brytpunkter genom att gå från flex till grid. Det är ovanligt, men kan vara användbart: en horisontell flexrad på mobilen (för en navigeringsrad med piller) kan bli ett grid på skrivbordet (för en översikt över funktioner). Tricket är att du inte kan blanda flex- och gridklasser på samma element — den senare klassen vinner, och båda anger 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 justering och placering

Justeringsegenskaper drar också nytta av responsiva prefix. Innehåll kan vara centrerat på mobilen och vänsterjusterat på skrivbordet. text-center md:text-left är det klassiska exemplet. För flexbehållare centrerar justify-center md:justify-between elementen på mobilen men sprider ut dem mot kanterna på skrivbordet — idealiskt för en navigeringsrad som blir centrerade piller på mobilen.

<!-- 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 ordning på element

Tailwinds verktyg order-* ändrar den visuella ordningen på flex- och gridelement utan att ändra ordningen i DOM:en. Det gör att textinnehållet kan komma först i HTML (bättre för SEO och skärmläsare), medan bilden visas först visuellt på skrivbordet med lg:-order-1 eller lg:order-first. Responsiv ordning är ett kraftfullt verktyg för HTML där innehållet prioriteras, samtidigt som layouten visuellt följer designen.

<!-- 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>

Responsiva kolumner med automatisk anpassning

För verkligt flytande gitter som skapar så många kolumner som får plats kan du kombinera Tailwinds godtyckliga värden med CSS Grids auto-fill eller auto-fit. Den här metoden kräver inga brytpunkter — själva gridet bestämmer antalet kolumner utifrån det tillgängliga utrymmet och elementens minsta bredd. grid-cols-[repeat(auto-fill,minmax(240px,1fr))] skapar ett självanpassande grid där elementen är minst 240 px breda.

<!-- 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>

Responsiva layouter med sidofält

Layouter för appskal med sidofält behöver hanteras responsivt: sidofältet staplas under innehållet på mobilen och placeras bredvid det på skrivbordet. Mönstret är en flexbehållare som går från kolumn till rad: flex flex-col lg:flex-row. Sidofältet får en fast bredd på skrivbordet: w-full lg:w-64 shrink-0, medan huvudinnehållet fyller det återstående utrymmet 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>

Testa responsiva layouter

Så testar du responsiva layouter effektivt: använd webbläsarens responsiva designläge i DevTools för att växla mellan förinställda enhetsstorlekar. Testa vid de exakta brytpunktsgränserna (till exempel 639 px precis under sm och 640 px vid sm) för att upptäcka kantfall. Testa även mycket små (320 px) och mycket stora (2560 px) bredder för att säkerställa att layouten inte går sönder i ytterligheterna. Tailwinds JIT-motor genererar endast de klasser du använder, så oanvända brytpunktsvarianter skapar ingen onödig 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>

Snabbtest

Testa dina kunskaper om koncepten i Tailwind CSS Mastery från den här lektionen.

Besvara frågan i den interaktiva lektionen

Sammanfattning av lektionen

I den här lektionen har du lärt dig: flex-col till flex-row vid en brytpunkt är den centrala växlingen för responsiva layouter, grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 skapar ett klassiskt responsivt kortgaller, och order-*-hjälpklasser gör det möjligt att ha en annan ordning i DOM:en än den visuella ordningen för SEO-vänliga responsiva layouter. Härnäst utforskar vi responsiv typografi och justeringar av avstånd.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 30
Lektioner: 120

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Responsiva layouter med flex och grid” gratis?

Ja – hela texten till ”Responsiva layouter med flex och grid” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Tailwind CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Responsiva layouter med flex och grid”?

Växla mellan kolumn- och radlayouter vid olika brytpunkter med responsiva prefix som md:flex-row och lg:grid-cols-3. Ni övar på Tailwind CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Tailwind CSS Academy?

Du behöver inga förkunskaper. Utbildningen i Tailwind CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Responsiva layouter med flex och grid”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Tailwind CSS Academy-lektionen?

Ja. Varje Tailwind CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Tailwind CSS Academy