Само с няколко CSS правила можете да създадете оформление, вдъхновено от печат, което има гъвкавостта на мрежата. Това е като да вземете вестник, но когато хартията става по-малка, колоните ще се регулират и балансират автоматично, позволявайки на съдържанието да тече естествено.
.intro ( columns: 300px 2; )В columnsимота ще приеме column-count, column-widthили и двете свойства.
columns: || ;Използването на двете column-countи column-widthсе препоръчва за създаване на гъвкаво оформление с много колони. The column-countще действа като максимален брой колони, докато the column-widthще диктува минималната ширина за всяка колона. Чрез събирането на тези свойства заедно, оформлението с много колони автоматично ще се раздели на една колона при тесни ширини на браузъра, без да са необходими медийни заявки или други правила.
Разположението с няколко колони работи чудесно върху блокови елементи, включително списъци, за да се направи гъвкава навигация.
За по-нататъшна фина настройка на вашето многоколонно оформление, използвайте break-insideконкретни елементи, за да не се забиват между колони.
Повече информация
- Модул за оформление на няколко колони CSS Ниво 1 (Работна чернова)
- Документация за MDN
Поддръжка на браузър
| IE | Ръб, край | Firefox | Chrome | Сафари | Опера |
|---|---|---|---|---|---|
| 10+ | всичко | 9+ | 50+ | всичко | 11,5+ |
| Android Chrome | Android Firefox | Браузър за Android | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| всичко | всичко | всичко | всичко | всичко |