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:

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

css#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.