Wprowadzenie do CSS Grid
CSS Grid to sposób na rozmieszczanie elementów jednocześnie w poziomie i w pionie. Jest to bardziej zaawansowana metoda w porównaniu do flexboxów, ale również trudniejsza do opanowania.
Aby utworzyć grid, należy ustawić
elementowi właściwość display
na wartość grid:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
}
Po tym elemencie stanie się dwuwymiarową siatką, w której elementy są rozmieszczone w pionie (kolumny) i w poziomie (wiersze). Obszar na przecięciu kolumny i wiersza nazywa się komórką.
Za pomocą specjalnych właściwości można będzie rozmieszczać elementy zarówno po wierszach, jak i po kolumnach. Pozwoli to łatwo tworzyć na przykład takie rzeczy:
W kolejnych lekcjach najpierw nauczymy się rozmieszczania elementów po kolumnach, następnie przejdziemy do nauki wierszy, a potem połączymy to wszystko razem.
