Pomocí několika pravidel CSS můžete vytvořit rozložení inspirované tiskem, které má flexibilitu webu. Je to jako brát noviny, ale jak se papír zmenšuje, sloupce se automaticky upraví a vyváží a umožní přirozený tok obsahu.
.intro ( columns: 300px 2; )columnsNemovitost bude akceptovat column-count, column-widthnebo obě vlastnosti.
columns: || ;Použití obou column-counta column-widthje doporučeno k vytvoření flexibilního rozložení s více sloupci. column-countBude působit jako maximální počet sloupců, přičemž column-widthbude diktovat šířku minimálně pro každý sloupec. Když tyto vlastnosti spojíte dohromady, rozložení s více sloupci se automaticky rozdělí na jeden sloupec v úzkých šířkách prohlížeče bez nutnosti mediálních dotazů nebo jiných pravidel.
Rozložení s více sloupci funguje skvěle na blokových prvcích včetně seznamů, které umožňují flexibilní navigaci.
Chcete-li dále doladit rozložení s více sloupci, použijte break-insidena konkrétních prvcích, aby se nezasekly mezi sloupci.
Více informací
- CSS Multi-column Layout Module Level 1 (pracovní koncept)
- Dokument MDN
Podpora prohlížeče
| TJ | Okraj | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 10+ | Všechno | 9+ | 50+ | Všechno | 11,5+ |
| Android Chrome | Android Firefox | Prohlížeč Android | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| Všechno | Všechno | Všechno | Všechno | Všechno |