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