Уз само неколико ЦСС правила можете створити изглед инспирисан штампањем који има флексибилност Веба. То је као да узимате новине, али како се папир смањује, колоне се аутоматски прилагођавају и уравнотежују омогућавајући садржају природни проток.
.intro ( columns: 300px 2; )
columns
Имовина ће прихватити column-count
, column-width
или оба својства.
columns: || ;
Коришћење обе верзије column-count
и column-width
препоручује се за стварање флексибилног изгледа са више колона. Воља column-count
ће деловати као максималан број колона, док ће column-width
воља диктирати минималну ширину сваке колоне. Повлачењем ових својстава, изглед више ступаца аутоматски ће се разбити у један ступац на уским ширинама прегледача без потребе за медијским упитима или другим правилима.
Изглед са више колона одлично функционира на елементима блокова, укључујући листе, како би се створила флексибилна навигација.
Да бисте даље фино подесили распоред са више колона, користите break-inside
одређене елементе како бисте спречили да се заглаве између ступаца.
Више информација
- ЦСС модул распореда са више колона ниво 1 (радни нацрт)
- МДН документација
Подршка прегледача
ИЕ | Ивица | Фирефок | Хром | Сафари | Опера |
---|---|---|---|---|---|
10+ | Све | 9+ | 50+ | Све | 11.5+ |
Андроид Цхроме | Андроид Фирефок | Андроид претраживач | иОС Сафари | Опера Мобиле |
---|---|---|---|---|
Све | Све | Све | Све | Све |