Ymmärrys grid-template-rows ja grid-template-columns

CSS Grid -asettelujen hallitsemisen aloittamiseksi on tärkeää ymmärtää, kuinka määritellään ruudukon rakenne käyttämällä grid-template-rows- ja grid-template-columns-ominaisuuksia. Näiden ominaisuuksien avulla määritellään ruudukon rivien ja sarakkeiden määrä sekä niiden koot.

Molempien ominaisuuksien syntaksi on yksinkertainen: annetaan välilyönnillä eroteltu lista raidan kokoja käyttäen yksiköitä kuten px, em, %, fr (murtoluku), tai avainsanoja kuten auto.

Esimerkki:

• grid-template-columns: 200px 1fr 2fr; luo kolme saraketta:
  • Ensimmäinen sarake kiinteästi 200 pikseliä;
  • Toinen sarake vie yhden osan jäljellä olevasta tilasta;
  • Kolmas sarake vie kaksi osaa jäljellä olevasta tilasta.
• grid-template-rows: 100px auto; luo kaksi riviä:
  • Ensimmäinen rivi kiinteästi 100 pikseliä;
  • Toinen rivi mukautuu automaattisesti sisällön mukaan.

Parhaat käytännöt:

• Käytä joustavia yksiköitä kuten fr responsiivisiin asetteluihin;
• Pidä ruudukon määrittelyt selkeinä ja luettavina;
• Vältä liian monimutkaisia raitalistoja, ellei suunnittelu sitä vaadi.

Miten ruudukon määrittelyjen muuttaminen vaikuttaa asetteluun

Kun muutat grid-template-rows- ja grid-template-columns-arvoja, hallitset suoraan raitojen määrää ja kokoa, mikä vaikuttaa siihen, miten ruudukon kohteet sijoittuvat.

• Sarakkeiden määrän lisääminen saa ruudukon kohteet jakautumaan useampiin pystysuoriin raitoihin;
• Rivin koon muuttaminen laajentaa tai supistaa kohteille varattua tilaa;
• Joustavien yksiköiden, kuten fr, käyttö mahdollistaa asettelun mukautumisen eri näyttökokoihin;
• Kiinteät yksiköt, kuten px, tarjoavat tarkan hallinnan raidan mittoihin.

Näiden määrittelyjen vuorovaikutuksen ymmärtäminen auttaa ennakoimaan ja hallitsemaan ruudukon kohteiden sijoittelua ja mitoitusta, mikä tekee asetteluista sekä kestäviä että responsiivisia.