Ú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:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#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.
