Frontend Academy · Oppitunti

CSS Grid asetteluun

Määritä rivejä ja sarakkeita CSS Gridillä, sijoita kohteet tarkasti ja luo yleisiä sivuasetteluja vähäisellä koodilla.

Oppitunti 3/413 vaihetta

CSS Grid asetteluun 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.

Mikä on CSS Grid

CSS Grid on kaksiulotteinen asettelujärjestelmä — hallitsette sekä rivit että sarakkeet. Se on paras työkalu sivun yleiseen rakenteeseen ja elementtien tarkkaan sijoitteluun määritetyn ruudukon alueille.

Sarakkeiden määrittäminen: grid-template-columns

grid-template-columns määrittää sarakerakenteen. Käyttäkää kiinteitä kokoja (px), joustavia osuuksia (fr) tai auto-arvoa. repeat(n, size) toistaa ruudukon raidan määrityksen.

.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* sidebar + main */
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
}

fr-yksikkö

fr eli fraction unit jakaa jäljelle jäävän tilan suhteellisesti. 1fr 2fr antaa toiselle sarakkeelle kaksi kertaa niin paljon tilaa kuin ensimmäiselle. Se on olennainen joustavissa ruudukon raidoissa.

.layout {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* left center right */
}

Rivien määrittäminen: grid-template-rows

Voitte määrittää myös rivit eksplisiittisesti. Jos ette määritä niitä, selain luo implisiittiset rivit automaattisesti. grid-auto-rows: minmax(200px, auto) määrittää implisiittisten rivien koon.

.page {
  display: grid;
  grid-template-rows: auto 1fr auto; /* header content footer */
  min-height: 100vh;
}

gap Gridissä

Flexboxin tapaan gap lisää tilaa ruudukon raitojen väliin vaikuttamatta ulkoreunoihin. row-gap ja column-gap hallitsevat akseleita erikseen.

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

grid-template-areas

Nimetkää ruudukon alueet merkkijonoilla ja sijoittakaa elementit niihin grid-area-määrityksellä. Tämä tekee asettelukoodista selkeää ja helposti hahmotettavaa.

.page {
  display: grid;
  grid-template-areas:
    'header header header'
    'sidebar main main'
    'footer footer footer';
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
}
header { grid-area: header; }
sidenav { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }

Kohteiden sijoittaminen grid-column- ja grid-row-määrityksillä

Hallitkaa kohteen tarkkaa sijaintia määrityksillä grid-column: start / end ja grid-row: start / end. Viimeiseen linjaan voi viitata arvolla -1. span N kattaa N raitaa.

.featured {
  grid-column: 1 / -1;  /* span all columns */
  grid-row: span 2;      /* occupy two rows */
}

auto-fit ja minmax() — responsiiviset sarakkeet

Tehokkain responsiivisen ruudukon yhden rivin määritys on repeat(auto-fit, minmax(280px, 1fr)). Se luo niin monta saraketta kuin mahtuu, vähintään 280 pikseliä leveinä, ja täyttää jäljelle jäävän tilan 1fr-arvolla.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

auto-fill ja auto-fit

auto-fill luo raitoja, vaikka ne olisivat tyhjiä, ja säilyttää kiinteän ruudukon. auto-fit kutistaa tyhjät raidat, jotta kohteet laajenevat täyttämään rivin. Käyttäkää auto-fit-arvoa, kun sisällön pitäisi venyä.

Implisiittinen ja eksplisiittinen ruudukko

Määrittämänne raidat muodostavat eksplisiittisen ruudukon. Kun lisäätte kohteita enemmän kuin määritettyjä raitoja on, selain luo implisiittisiä raitoja. Hallitkaa niiden kokoa määrityksillä grid-auto-rows ja grid-auto-columns.

Grid vai Flexbox — milloin kumpaakin käytetään

Grid: kaksiulotteiset asettelut, sivun rakenne, galleriat ja hallintapaneelit. Flexbox: yksiulotteiset rivit tai pinot, keskittäminen ja kohteiden jakaminen rivillä. Ne täydentävät toisiaan — käyttäkää Gridiä sivun runkoon ja Flexboxia komponenttien sisäiseen asetteluun.

Pikatarkistus

Mikä CSS-arvo luo sarakkeita, jotka ovat vähintään 250 pikseliä leveitä ja jakavat jäljelle jäävän tilan tasan?

Vastaa interaktiivisessa oppitunnissa

Kertaus: CSS Grid

grid-template-columns määrittää sarakkeet. fr jakaa tilan. repeat() yksinkertaistaa toistoa. gap lisää välit. grid-template-areas tekee asetteluista selkeitä. auto-fit yhdessä minmaxin kanssa luo responsiivisia ruudukoita ilman media queryjä. Grid on ensisijainen työkalu kaksiulotteisiin sivuasetteluihin.

Aloita maksutta

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

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”CSS Grid asetteluun” ilmainen?

Kyllä – oppitunnin ”CSS Grid asetteluun” 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 ”CSS Grid asetteluun”?

Määritä rivejä ja sarakkeita CSS Gridillä, sijoita kohteet tarkasti ja luo yleisiä sivuasetteluja vähäisellä koodilla. 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 ”CSS Grid asetteluun”-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

← Takaisin: Frontend Academy