Fyrirlestur — CSS grid

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

---

Grid

• CSS grid er notað til að skilgreina skipulag (e. layout) á síðu
• Skipuleggjum í röðum og dálkum
• Svipað hugtak og þegar síður voru skipulagðar með <table>… en sérhannað til þess

---

• Getum skilgreint með nákvæmum (px) eða hlutfallslegum einingum
• Skilgreinum raðir og dálka sem mynda grid tracks og grid lines
• Staðsetjum hluti (items) á grid út frá þessum tracks og lines

---

Grid tracks & line

• Grid line er lína í grid sem er talin frá byrjun (frá 1!) að enda fyrir raðir og dálka
• Grid track er plássið á milli lína og er plássið þar sem hlutir lenda, bæði fyrir raðir og dálka

---

Grid með 4 dálka line (talið innan gráu hringja) og 3 raða line (innan svörtu hringja).

Grid hefur 3 dálka track og 2 raða track.

---

Skilgreining á grid

• Skilgrinum explicit grid með grid-template-columns og grid-template-rows
• implicit grid er skilgreind með því að setja none (sem er sjálfgefið gildi)
  • Grid track eru búin til eftir þörfum, eftir því hve mikið efni er í hlutum innan grid

---

• Getum stýrt hvernig stærð er útfærð í implicit grid með grid-auto-rows og grid-auto-columns
• Getum blandað implicit og explicit grid

---

Gildi

• fr, ný hlutfallsleg eining fyrir fraction af plássi, hagar sér svipað og þegar við setjum flex-grow
• min-content, fyrir minnstu breidd efnis
• max-content, fyrir hámarks breidd efnis

---

• minmax(), fall sem velur min eða max gildi
• repeat(), fall sem leyfir að skilgreina mörg

---

Staðsetning á hlutum á grid

• grid-column, shorthand fyrir grid-column-start og grid-column-end
• grid-column-start skilgreinir hvar hlutur byrjar, eða hversu mörg spannar með span
• grid-column-end skilgreinir hvar hlutur endar, eða hversu mörg spannar

---

gap

• gap shorthand fyrir row-gap og column-gap
• Stærð á bilum (gutter) milli dálka og raða

---

grid-template-areas

• Getum gefið svæðum á grid nöfn til að einfalda staðsetningu
• grid-template-areas tekur við strengjum með bilum sem mynda nefnd svæði
• grid-area tekur við heiti svæðis

grid-template-areas: "a a a"
                     "b c c"
                     "b c c";

---

Dæmi

• Grid
• Jen Simmons: Intro to CSS grid
• Flexbox grid útfært með CSS grid
• CSS grid areas
• Responsive CSS grid