Úvod do CSS gridov

CSS gridy predstavujú spôsob ako umiestniť prvky súčasne horizontálne aj vertikálne. Je to pokročilejší spôsob v porovnaní s flexmi, no zložitejší na zvládnutie.

Ak chcete vytvoriť grid, musíte nastaviť prvku vlastnosť display na hodnotu grid:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
}

Potom sa prvok premení na dvojrozmernú mriežku, v ktorej sú prvky usporiadané vertikálne (stĺpce) a horizontálne (riadky). Oblasť na priesečníku stĺpca a riadku sa nazýva bunka.

Pomocou špeciálnych vlastností budete môcť umiestňovať prvky podľa riadkov a stĺpcov. To umožní jednoducho vytvárať napríklad takéto veci:

V nasledujúcich lekciách najprv preštudujeme umiestňovanie prvkov podľa stĺpcov, potom prejdeme k štúdiu riadkov a nakoniec všetko spojíme dokopy.