Čo je CSS Grid?
CSS Grid Layout je dvojrozmerný systém rozloženia zabudovaný do moderných prehliadačov. Definujete kontajner mriežky pomocou display: grid, potom ovládate stĺpce pomocou grid-template-columns a riadky pomocou grid-template-rows. Zlomkové jednotky (fr) proporcionálne rozdeľujú dostupný priestor. Podriadené položky môžu presahovať cez viacero stĺpcov alebo riadkov pomocou grid-column: span N a grid-row: span N.
Ako používať Generátor CSS Grid
-
Nastavte počet stĺpcov a riadkov pomocou číselných polí (1–12 pre každé).
-
Upravte grid-template-columns a grid-template-rows na ovládanie veľkostí (napr. 1fr 2fr, 200px auto).
-
Nastavte medzeru medzi bunkami (napr. 10px, 1rem).
-
Kliknite na ľubovoľnú bunku v náhľade na jej výber (zfarbí sa na oranžovo).
-
Nastavte col-span a row-span v paneli Presah bunky, potom kliknite Použiť. Bunky s presahom sa zfarbia na zeleno.
-
Kliknite na záložku CSS alebo HTML pre prepnutie formátu výstupu, potom zkopírujte do schránky.
-
Kliknite Obnoviť všetko na začatie odznova s novou mriežkou 3×3.