Wystarczy kilka reguł CSS, aby stworzyć układ inspirowany drukiem, który jest elastyczny w Internecie. To tak, jakby wziąć gazetę, ale gdy papier się zmniejsza, kolumny dostosowują się i równoważą automatycznie, umożliwiając naturalny przepływ zawartości.
.intro ( columns: 300px 2; )columnsNieruchomość będzie akceptować column-count, column-widthalbo obie właściwości.
columns: || ;Używanie obu column-counti column-widthjest zalecane do tworzenia elastycznego układu wielokolumnowego. column-countBędzie działać jako maksymalna liczba kolumn, natomiast column-widthbędzie dyktować szerokość minimum dla każdej kolumny. Łącząc te właściwości, układ wielokolumnowy automatycznie podzieli się na pojedynczą kolumnę przy wąskiej szerokości przeglądarki bez potrzeby zapytań o media lub innych reguł.
Układ wielokolumnowy świetnie sprawdza się w przypadku elementów blokowych, w tym list, umożliwiając elastyczną nawigację.
Aby jeszcze bardziej dostosować układ wielokolumnowy, użyj break-insidena określonych elementach, aby nie utknęły między kolumnami.
Więcej informacji
- Moduł układu wielokolumnowego CSS, poziom 1 (wersja robocza)
- Dokumentacja MDN
Wsparcie przeglądarki
| TO ZNACZY | Brzeg | Firefox | Chrom | Safari | Opera |
|---|---|---|---|---|---|
| 10+ | Wszystko | 9+ | 50+ | Wszystko | 11,5+ |
| Android Chrome | Android Firefox | Przeglądarka Android | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| Wszystko | Wszystko | Wszystko | Wszystko | Wszystko |