Galerie fotek ve třech sloupcích. Rozvržení stránky s hlavičkou, bočním panelem, obsahem a patičkou. Obojí jsou řádky i sloupce zároveň. Na to je CSS grid.
Flexbox řadí věci do jedné řady. Grid kreslí celou mřížku, jako šachovnici, a prvky do ní pokládá na políčka.
display: grid; je kontejner a vytvoří mřížku. Jeho přímí potomci jsou položky, které se do mřížky pokládají..galerie { display: grid; }1fr 2fr – druhý sloupec dostane dvakrát víc zbylého místa než první.| Zápis | Co vznikne |
|---|---|
grid-template-columns: 200px 1fr; | pevný sloupec 200 px a sloupec na zbytek |
grid-template-columns: 1fr 1fr 1fr; | tři stejné sloupce |
grid-template-columns: repeat(3, 1fr); | totéž, kratší zápis |
grid-template-rows: auto 1fr auto; | řádek podle obsahu, řádek na zbytek, řádek podle obsahu |
gap: 16px; | mezery mezi řádky i sloupci |
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }. Fotky se samy rozloží po čtyřech do řádků.grid-column: 1 / 3 = od čáry 1 po čáru 3, tedy přes dva sloupce. span 2 = přes dvě stopy.grid-column: 1 / -1 roztáhne položku přes všechny sloupce..hlavni-foto { grid-column: 1 / -1; } nebo grid-column: 1 / 4; nebo grid-column: span 3;. Čára −1 je poslední, takže zápis funguje i při změně počtu sloupců.grid-column: 2 / 4 – sloupce 2 a 3 (mezi čarami 2 a 4)grid-row: span 2 – přes dva řádkyrepeat(2, 100px 1fr) – 100px 1fr 100px 1frZkus si u každé kartičky odpověď nakreslit na papír s mřížkou, pak ji otoč.
grid-column: 1 / 3 zabere sloupce 1, 2 a 3.Od čáry 1 do čáry 3 jsou mezi nimi jen dvě stopy, stejně jako od 1 do 3 cm na pravítku jsou 2 cm.
display: grid vytvoří mřížku. grid-template-columns/rows určí stopy (px, %, fr, repeat()), gap mezery. Položky se umisťují mezi číslované čáry pomocí grid-column a grid-row.Typická stránka: hlavička nahoře, vlevo menu, uprostřed obsah, dole patička. Gridem to napíšeš na pár řádků a ještě si můžeš rozvržení „nakreslit“ přímo v CSS.
display: grid. Určuje řádky a sloupce, do kterých se pokládají jeho přímí potomci.body { display: grid; }fr.200px 1fr – 200 px pevně, zbytek pro druhý sloupec.grid-template-areas, položka se do ní pošle vlastností grid-area.header { grid-area: hlavicka; }display: grid.grid-template-columns: 220px 1fr;.grid-template-rows: auto 1fr auto;.grid-template-areas: "hlavicka hlavicka" "menu obsah" "paticka paticka";.header { grid-area: hlavicka; }, nav { grid-area: menu; }, main { grid-area: obsah; }, footer { grid-area: paticka; }.Stejné jméno vedle sebe znamená, že oblast zabírá víc buněk. Oblast musí být vždy obdélník.
grid-template-columns: 200px 1fr 2fr; gap: 20px;. Jak široké jsou sloupce?grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));. minmax říká: nejméně 150 px, nejvíc 1fr. auto-fill vytvoří tolik sloupců, kolik se vejde. Funguje to bez media queries.| Flexbox | Grid | |
|---|---|---|
| rozměry | jedna řada (řádek nebo sloupec) | dvě dimenze (řádky i sloupce) |
| kdo určuje rozložení | hlavně obsah a velikost položek | hlavně mřížka kontejneru |
| typické použití | menu, řada tlačítek, zarovnání ikony a textu | rozvržení stránky, galerie, dlaždice |
Roztřiď úkoly. Pomůže otázka: je to jedna řada, nebo mřížka?
grid-template-areas: "a a" "b a"; – oblast a má tvar písmene L."a a" "b b" nebo "a b" "a b".Grid neumí oblast tvaru L. Takový zápis je neplatný a prohlížeč celou vlastnost ignoruje.
fr (díl volného místa po odečtení pevných stop a mezer). grid-template-areas dovolí rozvržení nakreslit jmény oblastí. Flexbox na řady, grid na mřížky.