CSS Grid Layout – Pomagalnik

Grid ali daljše CSS Grid Layout je trenutno najmočnejša CSS značka za postavljanje posameznih elemntov oz. postavitev. CSS Grid Layout je 2-dimenzionalni sistem, ki nam omogoča izgradnjo postavitev glede na kolone in vrstice. V primerjavi z Flexboxom, ki je 1-dimenzionalen sistem in je namenjen posameznim modulom je CSS Grid Layout namenjen izgradnji postavitve.

CSS Grid Layout bo popolnoma spremenil naš način priprave spletnih strani in spletnih aplikacij, ki temeljijo na mrežni postavitvi. Prve postavitve so se pripravljale s pomočjo tabel, naseljevali smo z »float«, pozicioniranjem in »inline-block«. Vse omenjene metode so bile v osnovi hekanje, saj smo uporabljali elemente ali značke na način za katerega niso bile ustvarjene. Nobena izmed teh metod pa ni omogočala vseh funkcionalnosti, ki bi si jih želeli pri postavitvah.

Flexbox je veliko spremenil, vendar je omejen na enostavne 1-dimenzionalne postavitve, ki so namenjene posameznim modulom. CSS Grid Layout pa je 2-dimenzionalen zato skupaj delujeta zelo dobro saj nam omogočata vse, kar smo si želeli. CSS Grid Layout je prvi CSS modul, ki je posebej namenjen reševanju postavljanju mrežnih postavitev.

Primer CSS Grid Layout

<div class="container">
  <div class="item header">Header</div>
  <div class="item content">Content</div>
  <div class="item sidebar">Sidebar</div>
  <div class="item footer">Footer</div>
</div>

.header {
    background-color: #09C;
    grid-area: header;
}
    
.content {
    background-color: #0C3;
    grid-area: content;
}

.sidebar {
    background-color: #0C3;
    grid-area: sidebar;
}

.footer {
    background-color: #09C;
    grid-area: footer;
}

.item {
    padding: .5em;
}

.container {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 250px 250px 250px;
    grid-template-areas:
    "....... header header"
    "sidebar content content"
    "footer footer footer";
}

Ali lahko CSS Grid Layout že uporabimo?

CSS Grid Layout ima danes podporo le v Chromu in Firefox brskalniku, težave imamo pri vseh ostalih brskalnikih, kjer je potrebno zagotoviti ustrezno alternativo.