Úvod do CSS gridů

CSS gridy představují způsob, jak umístit prvky současně horizontálně i vertikálně. Je to pokročilejší metoda ve srovnání s flexboxy, ale složitější na osvojení.

Chcete-li vytvořit grid, musíte nastavit prvku vlastnost 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;
}

Poté se prvek změní na dvourozměrnou mřížku, ve které jsou prvky uspořádány vertikálně (sloupce) a horizontálně (řádky). Oblast na průsečíku sloupce a řádku se nazývá buňka.

Pomocí speciálních vlastností můžete umisťovat prvky jak po řádcích, tak po sloupcích. To umožní snadno vytvářet například takové věci:

V následujících lekcích nejprve prostudujeme umístění prvků ve sloupcích, poté přejdeme k studiu řádků a nakonec vše spojíme dohromady.