Responsiiviset asettelut Flexillä ja Gridillä
Vaihtakaa sarake- ja rivi asettelujen välillä eri breakpoint-pisteissä käyttämällä responsiivisia etuliitteitä, kuten md:flex-row ja lg:grid-cols-3.
Responsiiviset asettelut Flexillä ja Gridillä on ilmainen Tailwind CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Tailwind CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Responsiivisen asettelun perusteet
Tailwindin kaksi tärkeintä asettelutekniikkaa — Flexbox ja Grid — toimivat luontevasti yhdessä responsiivisten breakpoint-etuliitteiden kanssa. Perusajatus on yksinkertainen: määritelkää ensin mobiiliasettelu etuliitteettömillä apuluokilla ja lisätkää sitten breakpoint-etuliitteillä varustettuja ohituksia asettelun muuttamiseksi suuremmilla näytöillä. Kun ymmärrätte, miten flex- ja grid-asettelujen välillä vaihdetaan ja miten niiden keskeisiä ominaisuuksia muutetaan breakpointeissa, pystytte rakentamaan minkä tahansa responsiivisen suunnitelman.
<!-- 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:sta flex-row:ksi breakpointeissa
Yleisimmin käytetty responsiivinen flex-malli on suunnan vaihtaminen. flex flex-col md:flex-row pinoaa lapset pystysuunnassa puhelimissa ja asettelee ne vaakasuunnassa tableteilla. Käyttäkää tätä hero-osioissa (mobiilissa teksti kuvan yläpuolella, työpöydällä rinnakkain), ominaisuusriveissä ja vertailukorteissa. Lapset säilyttävät luonnollisen korkeutensa saraketilassa ja venyvät rivitilassa saman korkuisiksi.
<!-- 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>Responsiiviset grid-sarakemäärät
Sisältögrideissä sarakkeiden määrää lähes aina kasvatetaan suuremmilla breakpointeilla. Aloittakaa mobiilissa yhdestä sarakkeesta, jotta sisältö on helposti luettavaa, lisätkää toinen sarake pienillä tableteilla ja käyttäkää työpöydällä lopullista sarakemäärää. grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 on tyypillinen malli tuotelistauksille, tiimijäsenruudukoille ja sisältökorttikirjastoille.
<!-- 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>Responsiiviset sarakkeiden span-arvot
Kiinteän sarakemäärän gridissä responsiivisten col-span-arvojen avulla tietyt kohteet voivat viedä eri määrän tilaa eri breakpointeissa. Korostettu kortti voi viedä työpöydällä kaikki 4 saraketta mutta kutistua mobiilissa yhteen sarakkeeseen. Malli col-span-1 sm:col-span-2 lg:col-span-4 tuottaa tämän toiminnan — kohde on mobiilissa normaalikokoinen ja laajenee asteittain näytön koon kasvaessa.
<!-- 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>Responsiiviset välit
Myös flex- tai grid-lasten välien tulisi olla responsiivisia. Tiiviit välit toimivat mobiilissa, jossa tilaa on vähän, mutta työpöydällä leveämmät välit parantavat visuaalista hengitystilaa. gap-3 md:gap-6 lg:gap-10 kasvattaa väliä asteittain. Responsiiviset välit ovat erityisen tärkeitä markkinointiosioiden grideissä, joissa tyhjä tila on keskeinen suunnitteluelementti.
<!-- 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>flex- ja grid-asettelun vaihtaminen breakpointeissa
Voitte vaihtaa itse näyttötyyppiä breakpointeissa siirtymällä flex-asettelusta grid-asetteluun. Tämä on epätavallista, mutta voi olla hyödyllistä: mobiilin vaakasuuntainen flex-rivi (esimerkiksi navigointipilleripalkki) muuttuu työpöydällä gridiksi (ominaisuuksien yleiskatsaukseksi). Huomioikaa, että samalla elementillä ei voi käyttää flex- ja grid-luokkia sekaisin — myöhempi luokka voittaa, ja molemmat asettavat display-ominaisuuden.
<!-- 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>Responsiivinen tasaus
Tasausominaisuudetkin hyötyvät responsiivisista etuliitteistä. Sisältö voidaan keskittää mobiilissa ja tasata vasemmalle työpöydällä. text-center md:text-left on tästä klassinen esimerkki. Flex-säiliöissä justify-center md:justify-between keskittää kohteet mobiilissa mutta levittää ne reunoille työpöydällä — ihanteellinen navigointipalkille, joka muuttuu mobiilissa keskitettyjen pillereiden riviksi.
<!-- 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>Kohteiden responsiivinen järjestys
Tailwindin order-*-apuluokat muuttavat flex- ja grid-lasten visuaalista järjestystä muuttamatta DOM-järjestystä. Näin tekstisisältö voidaan sijoittaa HTML:ssä ensin (mikä on parempi hakukoneoptimoinnin ja ruudunlukijoiden kannalta), vaikka kuva näkyisi visuaalisesti ensin työpöydällä käyttämällä lg:-order-1- tai lg:order-first-luokkaa. Responsiivinen järjestys on tehokas keino toteuttaa sisältölähtöinen HTML ja samalla suunnittelulähtöinen visuaalinen asettelu.
<!-- 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>Automaattisesti täyttyvät responsiiviset sarakkeet
Jos haluatte todella joustavia gridejä, jotka luovat niin monta saraketta kuin tilaan mahtuu, yhdistäkää Tailwindin mielivaltaiset arvot CSS Gridin auto-fill- tai auto-fit-arvoon. Tämä menetelmä ei tarvitse breakpointeja — grid päättää itse sarakkeiden määrän käytettävissä olevan tilan ja kohteen vähimmäisleveyden perusteella. grid-cols-[repeat(auto-fill,minmax(240px,1fr))] luo itsestään mukautuvan gridin, jossa kohteet ovat vähintään 240 pikseliä leveitä.
<!-- 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>Responsiiviset sivupalkkiasettelut
Sivupalkilliset sovelluskuoret vaativat responsiivista käsittelyä: mobiilissa sivupalkki sijoittuu sisällön alle ja työpöydällä sen viereen. Malli on flex-säiliö, joka vaihtuu sarakkeesta riviksi: flex flex-col lg:flex-row. Sivupalkille määritetään työpöydällä kiinteä leveys: w-full lg:w-64 shrink-0, kun taas pääsisältö täyttää jäljelle jäävän tilan luokilla 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>Responsiivisten asettelujen testaaminen
Testatkaa responsiivisia asetteluja tehokkaasti selaimen DevTools-työkalujen responsiivisessa suunnittelutilassa ja vaihtakaa valmiiden laitekokojen välillä. Testatkaa tarkasti breakpointien rajakohdissa (esimerkiksi 639 pikseliä juuri sm:n alapuolella ja 640 pikseliä sm-kohdassa), jotta löydätte reunatapaukset. Testatkaa myös erittäin pienillä (320 pikseliä) ja erittäin suurilla (2560 pikseliä) leveyksillä varmistaaksenne, ettei asettelu rikkoudu ääripäissä. Tailwindin JIT-moottori luo vain käyttämänne luokat, joten käyttämättömistä breakpoint-varianteista ei synny CSS-turvotusta.
<!-- 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>Pikatarkistus
Testatkaa tämän oppitunnin Tailwind CSS Mastery -käsitteiden ymmärtämistä.
Oppitunnin yhteenveto
Tässä oppitunnissa opitte, että flex-col-arvon vaihtaminen flex-row-arvoksi murtumakohdassa on responsiivisen asettelun keskeinen vaihto, grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 luo perinteisen responsiivisen korttiruudukon ja order-* -apuohjelmien avulla DOM-järjestys voi poiketa visuaalisesta järjestyksestä hakukoneystävällisissä responsiivisissa asetteluissa. Seuraavaksi tutustumme responsiiviseen typografiaan ja välistyksen säätämiseen.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Responsiiviset asettelut Flexillä ja Gridillä” ilmainen?
Kyllä – oppitunnin ”Responsiiviset asettelut Flexillä ja Gridillä” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Tailwind CSS Academy-kurssin, päivitä CoddyKit PROhon. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Responsiiviset asettelut Flexillä ja Gridillä”?
Vaihtakaa sarake- ja rivi asettelujen välillä eri breakpoint-pisteissä käyttämällä responsiivisia etuliitteitä, kuten md:flex-row ja lg:grid-cols-3. Harjoittelet Tailwind CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Tailwind CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Tailwind CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Responsiiviset asettelut Flexillä ja Gridillä”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Tailwind CSS Academy-oppitunnilla?
Kyllä. Jokainen Tailwind CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Tailwindin breakpoint-järjestelmä
- Responsiiviset asettelut Flexillä ja Gridillä
- Responsiivinen typografia ja välistys
- Elementtien näyttäminen ja piilottaminen responsiivisesti