Iba pomocou niekoľkých pravidiel CSS môžete vytvoriť rozloženie inšpirované tlačou, ktoré má flexibilitu webu. Je to ako vziať si noviny, ale keď sa papier zmenší, stĺpce sa automaticky upravia a vyvážia, čo umožní prirodzený tok obsahu.
.intro ( columns: 300px 2; )columnsNehnuteľnosť bude akceptovať column-count, column-widthalebo obidve vlastnosti.
columns: || ;Použitie oboch column-counta column-widthsa odporúča na vytvorenie flexibilného viacstĺpcového rozloženia. Znak column-countbude slúžiť ako maximálny počet stĺpcov, zatiaľ čo column-widthznak z bude určovať minimálnu šírku každého stĺpca. Keď tieto vlastnosti spojíte, rozloženie s viacerými stĺpcami sa automaticky rozdelí na jeden stĺpec pri úzkych šírkach prehľadávača bez potreby mediálnych dotazov alebo iných pravidiel.
Rozloženie s viacerými stĺpcami funguje skvele na blokových prvkoch vrátane zoznamov, čo umožňuje flexibilnú navigáciu.
Ak chcete doladiť rozloženie viacerých stĺpcov, použite ďalšie break-insideprvky, aby ste zabránili uviaznutiu medzi stĺpcami.
Viac informácií
- Modul rozloženia viacstĺpcov CSS úrovne 1 (pracovný koncept)
- Dokument MDN
Podpora prehliadača
| IE | Hrana | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 10+ | Všetky | 9+ | 50+ | Všetky | 11,5+ |
| Android Chrome | Android Firefox | Prehliadač Android | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| Všetky | Všetky | Všetky | Všetky | Všetky |