HTML & CSS del 6 av 8: Layout med CSS – från kaos till kontroll

Kodkunskap är en utbildnings- och fortbildningssida och community för utvecklare. Denna podcast är en del av ett utbildningsmaterial.

🏠 https://www.kodkunskap.se

💬 https://discord.gg/hZfsnpQM

Denna serien handlar om HTML & CSS och detta är avsnittet 6 av 8.

---

Hur får man saker att hamna rätt på en webbsida? I det här avsnittet går vi igenom hur du med hjälp av CSS kan styra var dina element placeras – från grundläggande positionering till moderna layoutekniker med Flexbox. Det är här din webbsida går från enkel stapling till professionell struktur.

Du lär dig:

• Hur CSS display påverkar hur element visas (block, inline, flex m.fl.)
• Vad position betyder – och hur du placerar saker exakt där du vill ha dem
• Hur Flexbox fungerar och varför det förenklar layout
• Tips för att undvika vanliga layoutproblem – och hur du felsöker med webbläsarens utvecklarverktyg

Det här avsnittet ger dig kontroll över hur din sida faktiskt ser ut – oavsett skärmstorlek eller innehåll.

👉 I nästa avsnitt tar vi det vidare till responsiv design – så att din sida fungerar snyggt på både dator och mobil.

---

Exempel
<div class="container">
 <div>1</div>
 <div>2</div>
 <div>3</div>
</div>

.container {
 display: flex;
}

---

Resurser

🐸 Flexbox Froggy: https://flexboxfroggy.com/