Co je CSS Grid?
CSS Grid Layout je dvourozměrný systém rozvržení zabudovaný do moderních prohlížečů. Definujete kontejner mřížky pomocí display: grid, poté ovládáte sloupce pomocí grid-template-columns a řádky pomocí grid-template-rows. Zlomkové jednotky (fr) rozdělují dostupný prostor proporcionálně. Podřízené položky mohou přesahovat více sloupců nebo řádků pomocí grid-column: span N a grid-row: span N.
Jak používat Generátor CSS Grid
-
Nastavte počet sloupců a řádků pomocí číselných vstupů (1–12 pro každý).
-
Upravte grid-template-columns a grid-template-rows pro kontrolu velikostí (např. 1fr 2fr, 200px auto).
-
Nastavte mezeru mezi buňkami (např. 10px, 1rem).
-
Klikněte na libovolnou buňku v náhledu pro výběr (zbarví se oranžově).
-
Nastavte col-span a row-span v panelu Rozpětí buňky, poté klikněte Použít. Buňky s rozpětím se zbarví zeleně.
-
Klikněte na záložku CSS nebo HTML pro přepnutí formátu výstupu, poté zkopírujte do schránky.
-
Klikněte Resetovat vše pro začátek s novou mřížkou 3×3.