Generátor Flexbox a CSS Grid

Jak používat hřiště pro flexbox a grid

1. Vyber Rozložení: Flexbox nebo Grid, nebo začni jednou z Předvoleb (Vycentrované, Navigační lišta, Zalamované karty, Postranní panel, Responzivní mřížka karet, Svatý grál, 12 sloupců).
2. Nastav vlastnosti Kontejneru. U flexboxu: flex-direction a flex-wrap. U gridu: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items a grid-template-areas. Společné jsou justify-content, align-items, align-content, row-gap (px) a column-gap (px).
3. Spravuj Položky pomocí Přidat položku, Odstranit vybranou položku a Obnovit vybranou položku. Položku vybereš kliknutím v náhledu (nebo na ni přejdeš klávesou Tab a stiskneš Enter).
4. Uprav vybranou položku: order a align-self v obou režimech, flex-grow, flex-shrink a flex-basis u flexboxu a grid-area, grid-column, grid-row a justify-self u gridu.
5. Zkopíruj Kód CSS a odpovídající Kód HTML jejich tlačítky Kopírovat.

Každý ovládací prvek je standardní formulářové pole, takže celé hřiště funguje jen s klávesnicí. CSS obsahuje pouze vlastnosti, které jsi změnil oproti výchozím hodnotám, takže je krátké, a položky se stejným nastavením sdílejí jedno pravidlo (.item, když se shodují všechny).

Flexbox ve zkratce

Flexbox rozmisťuje položky podél jedné osy. flex-direction určuje hlavní osu (řádek nebo sloupec); justify-content rozděluje položky podél ní (center, space-between…) a align-items je umisťuje na vedlejší ose. S flex-wrap: wrap se položky, které se nevejdou, přesunou na nový řádek a align-content pak rozmisťuje tyto řádky.

Každá položka má tři vlastnosti velikosti, obvykle zapisované společně jako flex:

• flex-basis: výchozí velikost (auto použije obsah nebo width);
• flex-grow: kolik volného místa položka zabere (0 = žádné, 1 = rovný podíl);
• flex-shrink: kolik se vzdá, když místa není dost (0 = nikdy se nezmenší).

Předvolba Postranní panel ukazuje klasický vzor: postranní panel s flex-basis: 200px a flex-shrink: 0 a hlavní oblast s flex-grow: 1.

CSS Grid ve zkratce

Grid rozmisťuje položky ve dvou rozměrech. grid-template-columns: repeat(3, 1fr) vytvoří tři stejné sloupce; fr je podíl volného místa. repeat(auto-fill, minmax(120px, 1fr)) vytvoří tolik sloupců o šířce alespoň 120 px, kolik se vejde, což dá responzivní mřížku karet bez jediného media query.

Položky vyplňují buňky popořadě, pokud je neumístíš: grid-column: span 2 udělá položku širokou dva sloupce a grid-column: 1 / -1 ji roztáhne přes celý řádek.

grid-template-areas umožňuje nakreslit rozložení pomocí názvů. Napiš jeden řádek na řádek textu, například header header a pak nav main, a položkám přiřaď grid-area: header nebo grid-area: main. Tečka označuje prázdnou buňku. Každý řádek musí mít stejný počet buněk a každý název musí tvořit obdélník; jinak tě nástroj upozorní.