Grid

CSS Grid je sodoben sistem postavitve za razporejanje elementov v dveh dimenzijah: po vrsticah in stolpcih. Posebej uporaben je za celotne postavitve strani, kartične mreže in primere, kjer želimo natančneje določiti položaj posameznih elementov.

V primerjavi s Flexboxom, ki je namenjen predvsem postavitvi v eni dimenziji, Grid omogoča boljši pregled nad dvodimenzionalno mrežo. Zato je zelo primeren za zahtevnejše razporeditve vsebine.

Osnovna pravila

• CSS Grid ureja elemente v dveh dimenzijah: po vrsticah in stolpcih.
• Postavitev vključimo z lastnostjo display: grid.
• Širine stolpcev določamo z lastnostjo grid-template-columns.
• Višine vrstic določamo z lastnostjo grid-template-rows.
• Razmike med vrsticami in stolpci določamo z lastnostjo gap.
• Položaj posameznih grid elementov lahko določimo tudi zelo natančno.

Lastnost display: grid

Z lastnostjo display: grid vključimo mrežno postavitev. Neposredni otroci takega elementa se razporedijo po mreži.

<div class="mreza">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
</div>

.mreza {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
}

.mreza div {
   padding: 15px;
   background-color: #fccc88;
}

Če želimo, da se nadrejeni grid element obnaša kot vrstični element, lahko uporabimo tudi display: inline-grid.

Lastnost grid-template-columns

Lastnost grid-template-columns določa širine stolpcev v mreži. Pogosto uporabljamo enoto fr, ki deli razpoložljivi prostor med stolpce.

.triStolpci {
   display: grid;
   grid-template-columns: 1fr 2fr 1fr;
   gap: 10px;
}

Enota fr je zelo uporabna pri odzivnejših postavitvah, ker razdeli preostali prostor glede na razmerja med stolpci.

Lastnost grid-template-rows

Lastnost grid-template-rows določa višine vrstic v mreži. Uporabimo lahko fiksne mere, samodejno višino ali razmerja.

.mreza {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 80px 120px;
   gap: 10px;
}

Lastnost gap

Lastnost gap določa razmik med vrsticami in stolpci mreže. Če navedemo eno vrednost, velja za obe smeri. Če navedemo dve, prva določa razmik med vrsticami, druga pa med stolpci.

.razmiki {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px 10px;
}

.razmiki div {
   padding: 15px;
   background-color: #fccc88;
}

Uporaba lastnosti gap je preglednejša kot določanje razmikov z več posameznimi zunanjimi odmiki elementov.

Lastnost grid-template-areas

Z lastnostjo grid-template-areas lahko mrežo opišemo z imeni področij. Ta pristop je zelo uporaben pri večjih postavitvah strani, ker naredi kodo preglednejšo.

<div class="postavitev">
   <header class="glava">Glava</header>
   <main class="vsebina">Vsebina</main>
   <aside class="stran">Stranski stolpec</aside>
   <footer class="noga">Noga</footer>
</div>

.postavitev {
   display: grid;
   grid-template-columns: 2fr 1fr;
   grid-template-areas:
      "glava glava"
      "vsebina stran"
      "noga noga";
   gap: 10px;
}

.glava { grid-area: glava; }
.vsebina { grid-area: vsebina; }
.stran { grid-area: stran; }
.noga { grid-area: noga; }

Lastnosti posameznih elementov

Posameznim grid elementom lahko določimo njihov položaj v mreži. Najpogosteje uporabljamo naslednje lastnosti:

• grid-column – položaj ali razpon po stolpcih,
• grid-row – položaj ali razpon po vrsticah,
• grid-area – ime področja ali bližnjica za položaj.

.sirsi {
   grid-column: 1 / 3;
}

Tak način je uporaben, kadar želimo, da določen element zavzame več prostora kot ostali elementi v mreži.

Poravnava v mreži

Pri Grid postavitvi lahko uporabljamo lastnosti poravnave, kot so align-items, justify-items, align-content in justify-content. Z njimi določamo poravnavo vsebine znotraj celic ali pa poravnavo celotne mreže.

.mreza {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
   justify-items: center;
   align-items: center;
}

Primerjava: Grid in Flexbox

Priporočila

• Grid uporabi takrat, ko želiš postavitev urejati po vrsticah in stolpcih hkrati.
• Pri določanju stolpcev pogosto uporabi enoto fr, ker omogoča pregledna razmerja.
• Za razmike med elementi raje uporabi gap kot več posameznih zunanjih odmikov.
• Za večje postavitve strani razmisli o uporabi grid-template-areas.
• Pri položaju posameznih elementov premišljeno uporabi grid-column in grid-row.
• Za preproste enodimenzionalne vrstice ali stolpce pogosto zadostuje že Flexbox.

Pogoste napake

• Grid se uporablja tudi tam, kjer bi bila zaradi enostavnosti primernejša Flex postavitev.
• Lastnosti mrežne postavitve se določajo na elementih, ki niso neposredni otroci nadrejenega grid elementa.
• Pri stolpcih in vrsticah se uporabljajo preveč toge mere, zato postavitev ni dovolj prilagodljiva.
• Razmiki se urejajo z neenotnimi zunanjimi odmiki namesto z lastnostjo gap.
• Poimenovana področja mreže niso usklajena z lastnostjo grid-area.
• Zamenjuje se pomen poravnave vsebine v celicah in poravnave celotne mreže.