V rozložení s viacerými stĺpcami môžete pomocou prvkov rozbaliť prvky v stĺpcoch column-span.
h2 ( -webkit-column-span: all; column-span: all; )Priraďte column-spank prvku vo vnútri rozloženia s viacerými stĺpcami, aby sa z neho stal spanningový prvok. Rozloženie s viacerými stĺpcami sa obnoví s ďalším prvkom, ktorý nie je v rozsahu.
Hodnota column-spanmôže byť buď allalebo none.
Nastavte prvok pomocou column-span: alltak, aby preklenul stĺpce.
Hodnota nonepre túto vlastnosť je prepínač ukončenia pre spanovací prvok. Môžete to použiť pri práci s mediálnymi dopytmi, aby ste povedali prvku spanning, aby prestal spanning.
Pozrite si príklad rozpätia stĺpca Pen od CSS-Tricks (@ css-tricks) na CodePen.
Podpora prehľadávača
Firefox to nepodporuje column-span, existujú však zaujímavé riešenia.
Tu je všeobecne podporovaná podpora rozloženia viacerých stĺpcov:
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |
Nezabudnite na svoje predvoľby!