ЦСС модул за распоред у више колона је моћан алат који вам омогућава да лако креирате распореде са више колона за ваше веб странице. Успон респонзивног дизајна значи да је важно разумети како да користите овај модул.
Можете да користите својства колоне да бисте креирали флексибилне и динамичке распореде који се прилагођавају различитим величинама екрана.
Одређивање броја колоне, ширине и размака
Да бисте креирали одговарајући распоред са више колона за садржај странице, требало би да почнете тако што ћете одлучити колико колона желите да обухвата. Једно од најважнијих својстава у модулу са више колона је колона-број својство, које користите за подешавање броја колона на које ћете поделити садржај.
На пример:
.контејнер {
колона-број: 3;
}
Такође можете одредити ширину и размак колона. Можете подесити вредност ширине колоне користећи било који од подржане ЦСС јединице као пк, ем, или %.
Ако Ширина колона је подешен на ауто, претраживач ће израчунати ширину сваке колоне на основу колона-број својство и расположиви простор унутар вашег распореда.
На пример, овај ЦСС изјављује 3 колоне, свака са ширином од 200 пиксела:
.контејнер {
колона-број: 3;
Ширина колона: 200пк;
}
Тхе колона-размак својство специфицира празнину или размак између колона у распореду са више колона. Он ће подесити величину празних празних простора између суседних колона и може узети вредност дужине у пикселима, емс-овима или било којим другим подржаним јединицама.
На пример:
.контејнер {
колона-број: 3;
колона-размак: 20пк; /* поставља размак између колона на 20 пиксела */
}
Подразумевано, вредност од колона-размак је подешен на нормалан. Ваш претраживач бира ову вредност да би постигао доследан размак између колона у вашем изгледу, а да притом остане визуелно пријатан. Ова вредност такође може да варира између прегледача и такође може да зависи од величине фонта, висине реда, својство положаја, и друга својства изгледа садржаја колона.
Обезбеђивање равнотеже колона
ЦСС колоне покушавају да попуне сав расположиви простор унутар изгледа. Ово понекад може довести до колона које имају значајно различите висине, због чега изглед изгледа неуједначен.
Да бисте уравнотежили колоне, требало би да се уверите да свака колона у вашем изгледу има приближно исту количину садржаја.
То можете постићи постављањем ЦСС-а колона-филл власништво до баланс. Прегледач ће тада покушати да дистрибуира садржај равномерно у свим колонама тако да буду приближно исте висине.
Тхе колона-филл својство је подешено на баланс подразумевано, али вредност од ауто ће променити ово понашање. Коришћење аутоматске расподеле садржаја по колонама на основу доступног простора. Ово може довести до неуједначеног размака између колона и неуједначене висине колона. Може чак да произведе и распоред са празним колонама.
Ево примера како да користите колона-филл својство балансирања колона у распореду са више колона:
.изглед у више колона {
колона-број: 3;
колона-размак: 20пк;
колона-филл: баланс;
}
У овом примеру имамо распоред са више колона са три колоне и размаком од 20 пиксела између сваке колоне. Постављањем колона-филл власништво до баланс, обезбеђујемо да се садржај равномерно распоређује по колонама, што резултира уравнотеженом висином колона.
Важно је напоменути да је колона-филл својство можда неће добро функционисати за све распореде и може довести до неуједначеног размака између колона. У таквим случајевима, можда ћете морати да користите ЈаваСцрипт да бисте ручно балансирали колоне. Не заборавите да следите најбоље праксе и користите прогресивно побољшање тако да се не ослањате на ЈаваСцрипт.
Све састављање
Можете да спојите све што сте научили о примени изгледа са ЦСС колонама и да га користите за креирање изгледа у стилу часописа.
Прво направите основну ХТМЛ структуру. Користите елемент контејнера да умотате свој садржај, а затим направите неколико подређених елемената које затим можете распоредити у колоне.
хтмл>
<хтмл>
<глава>
<линкрел="стилесхеет"хреф="ЦССцолумнс.цсс" />
глава>
<тело>
Елемент контејнера
<дивкласа="изглед часописа">Цхилд Елементс
<дивкласа="чланак">
<х2>Наслов чланках2><стр>Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Сед ин
магна вел лорем пхаретра бибендум.стр>
див><дивкласа="чланак">
<х2>Наслов чланках2><стр>Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Сед ин
магна вел лорем пхаретра бибендум.стр>
див><дивкласа="чланак">
<х2>Наслов чланках2><стр>Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Сед ин
магна вел лорем пхаретра бибендум.стр>
див>
див>
тело>
хтмл>
Да бисте креирали изглед у стилу часописа користећи ЦСС модул за више колона, комбинујте колона-број, Ширина колона, колона-размак, и колона-филл својства:
.часопис-изглед {
колона-број: 3;
Ширина колона: 300пк;
колона-размак: 20пк;
колона-филл: баланс;
}
.чланак {
боја позадине: #ф8ф8ф8;
граница-радијус: 4пк;
кутија-сенка: 0 2пк 4пкргба(0, 0, 0, 0.1);
паддинг: 10пк;
провала унутра: избегавати-колона;
}
Овај пример такође дефинише провала унутра имовине на .чланак класе, са вредношћу од избегавати-колона. Својство обезбеђује да сваки чланак остане унутар једне колоне, уместо да се дели на више колона. Ево како би распоред требало да изгледа:
Коришћење резервних опција за неподржане прегледаче
Важно је напоменути да је колона-број својство није подржано у свим прегледачима. Прегледачи који не подржавају колона-број, ће уместо тога приказати садржај у једној колони.
Да бисте обезбедили резервне стилове за неподржане прегледаче, можете да користите упите о функцијама као што су @суппортс да открије подршку за колона-број својство и обезбеди алтернативне стилове када својство није подржано.
На пример:
.контејнер {
/* Замена за прегледаче који не подржавају број колона */
ширина: 100%;
}
/* Откривање подршке за број колона */
@суппортс (Број колона:3) {
.контејнер {
колона-број: 3;
}
}
У овом примеру користимо @суппортс упит функција за откривање подршке за колона-број имовина. Ако претраживач подржава бројање колона, контејнер елемент ће се приказати у три колоне. Ако претраживач не подржава бројање колона, приказаће садржај у једној колони користећи ширина имовина.
Разбијање садржаја у колоне
Све у свему, ЦСС колоне пружају практичан и моћан начин за креирање флексибилних и прилагодљивих распореда са више колона који побољшавају употребљивост и корисничко искуство веб садржаја.
Коришћењем ЦСС колона и ЈаваСцрипт-а заједно, можете креирати још софистицираније и динамичније распореде који се прилагођавају различитим корисничким преференцијама и величинама уређаја, чинећи ваш веб садржај приступачнијим и привлачнијим за ваше кориснике.