Flexboxin ja Gridin yhdistäminen
Käytä Gridiä sivun makrotason asetteluun ja Flexboxia komponenttitason kohdistukseen sekä opi, milloin kumpikin työkalu on oikea valinta
Flexboxin ja Gridin yhdistäminen on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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 Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Ne täydentävät toisiaan
Flexbox ja Grid eivät ole kilpailijoita, vaan ne on suunniteltu toimimaan yhdessä. Tavallinen malli on käyttää CSS Gridiä sivun yleisrakenteeseen ja Flexboxia kunkin grid-alueen sisällä komponentin sisällön järjestämiseen.
Sivun asettelu Gridillä, komponentit Flexillä
Määrittäkää sivun korkean tason runko Gridillä. Käyttäkää kunkin grid-alueen sisällä Flexboxia komponenttitason asetteluun: navigointilinkit riville ja kortin sisältö sarakkeeksi.
/* Page skeleton */
body {
display: grid;
grid-template-areas: 'header' 'main' 'footer';
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
/* Component inside grid area */
header {
display: flex;
justify-content: space-between;
align-items: center;
}Korttiruudukon malli
Klassinen malli on käyttää Gridiä korttien asetteluun ja Flexiä kunkin kortin sisäiseen asetteluun. Näin kortit kohdistuvat ruudukossa, ja niiden sisäinen sisältö (kuva, otsikko, leipäteksti ja alatunniste) asettuu oikein päällekkäin.
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.card {
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden;
}
.card-body { flex: 1; } /* push footer down */Navigointipalkin malli
Yleisessä navigointipalkissa yhdistyvät molemmat. Navigointipalkki itsessään on flex-säiliö logolle ja linkeille. Linkkiosio voi olla toinen flex-säiliö. Mega-menu voi käyttää Gridiä monisarakkeiseen asetteluun.
Holy Grail -asettelu
Holy Grail -asettelu (ylätunniste, kolmipalstainen keskiosa ja alatunniste) toteutetaan nykyään helposti Gridillä. Kolme saraketta — vasen sivupalkki, pääsisältö ja oikea sivupalkki — ovat Grid-sarakkeita, ja kunkin sisäinen sisältö käyttää Flexboxia.
.page {
display: grid;
grid-template:
'header header header' auto
'left main right' 1fr
'footer footer footer' auto
/ 200px 1fr 200px;
min-height: 100vh;
}Kaiken keskittäminen – Gridillä tai Flexillä
Sekä Grid että Flexbox voivat keskittää sisällön täydellisesti. Grid: place-items: center (lyhenne ominaisuuksille align-items ja justify-items). Flex: justify-content: center; align-items: center.
.center-grid {
display: grid;
place-items: center; /* centers both axes */
min-height: 100vh;
}
.center-flex {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}Responsiivinen sivupalkkiasettelu
Mobiilissa: yksi sarake (navigointi ylhäällä). Tableteilla ja sitä suuremmilla näytöillä: sivupalkki ja sisältö vierekkäin. Grid tekee tästä deklaratiivista — muuttakaa template-areas-määritystä media queryssä.
Kuvake + teksti -malli
Erittäin yleinen pienasettelu on kuvake tekstin vieressä. Flexbox sopii tähän täydellisesti, koska kyseessä on yksi kohdistettu rivi.
.alert {
display: flex;
align-items: flex-start;
gap: 12px;
}
.alert-icon { flex-shrink: 0; width: 20px; }
.alert-body { flex: 1; }Milloin valita toinen
Valitkaa Grid, kun ajattelette rivejä JA sarakkeita, kun kohteiden on kohdistuttava raitojen yli tai kun rakennatte sivun runkoa. Valitkaa Flex, kun ajattelette yhtä suuntaa, kun kohteiden on voitava kutistua ja kasvaa tai kun järjestätte painikkeita riville tai kohteita pinoon.
Älkää tehkö tarpeettoman monimutkaista
Joskus yksinkertainen lohkoelementti, jolla on max-width ja margin: auto, on parempi kuin monimutkainen ruudukko. Kaikki asettelut eivät tarvitse Gridiä. Käyttäkää yksinkertaisinta työkalua, jolla tehtävä onnistuu.
Asetteluongelmien selvittäminen
Napsauttakaa DevToolsissa Elements-paneelin grid- tai flex-merkkejä, jotta voitte näyttää ruudukon linjat tai flex-kohteiden ääriviivat. Tämä tekee näkymättömästä asettelurakenteesta näkyvän ja on korvaamaton apu kohdistusongelmien selvittämisessä.
Pikatarkistus
Mikä asettelutyökalujen yhdistelmä on yleisin sivutason ja komponenttitason asetteluissa tässä järjestyksessä?
Kertaus: Gridin ja Flexin yhdistäminen
Grid ja Flexbox täydentävät toisiaan. Käyttäkää Gridiä kaksiulotteiseen sivurakenteeseen. Käyttäkää Flexboxia yksiulotteiseen komponentin sisäiseen asetteluun. place-items: center keskittää kaiken gridissä. flex-direction: column ja flex: 1 työntävät kortin alatunnisteet alas. Selvittäkää ongelmat DevToolsin peittokuvamerkkien avulla.
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
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”Flexboxin ja Gridin yhdistäminen” ilmainen?
Kyllä – oppitunnin ”Flexboxin ja Gridin yhdistäminen” 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 Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Flexboxin ja Gridin yhdistäminen”?
Käytä Gridiä sivun makrotason asetteluun ja Flexboxia komponenttitason kohdistukseen sekä opi, milloin kumpikin työkalu on oikea valinta Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Flexboxin ja Gridin yhdistäminen”-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ä Frontend Academy-oppitunnilla?
Kyllä. Jokainen Frontend 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
- Flexboxin syventävä käsittely: tasaus, rivittyminen ja järjestys
- CSS Grid: template-areas, auto-fit ja minmax
- Flexboxin ja Gridin yhdistäminen
- CSS-muuttujat teemoitusta varten