Водич за ЦСС Грид Лаиоут Фр Унит

Тхе ЦСС Грид Лаиоут Модуле је испоручен са нова ЦСС јединица назива фр јединица. Као што је лако могуће, фр је скраћеница речи “фракција”. Нова јединица омогућава брзо резање решетке у пропорционалне колоне или редове. Као резултат тога, стварање потпуно прилагодљиве и флексибилне мреже постаје готово повјетарац.

Како је јединица за фракцију представљена заједно са модулом Грид Лаиоут, можете га користити у било ком претраживачу подржава ЦСС мрежу. Ако желите да подржите и старије претраживаче, ово је одличан ЦСС грид полифилл који вам омогућава да користите не само фр али и друге карактеристике мреже.

Основна употреба

Прво, погледајмо а основна решетка која користи фракцијску јединицу. Распоред испод дијели простор на три колоне једнаке ширине и два реда једнаке висине.

Од тога је направљен припадајући ХТМЛ сик дивс означено са .бок класа, унутра а .враппер див.

 
 
1.
 
2.
 
3.
 
4.
 
5.
 
6.
 
 

Да бисте користили модул Грид Лаиоут, морате да додате дисплаи: грид; ЦСС својство за омот. Тхе грид-темплате-цолумн власништво користи фр јединица као вредност; тхе однос три колоне је 1: 1: 1.

За редове мреже (грид-темплате-ровс имовине), нисам користио фр јединица, јер има смисла само ако је омот има фиксну висину. У супротном, може имати чудне резултате на неким уређајима, међутим, чак и тада фр јединица одржава однос (а ово је огромно).

Тхе грид-гап својство додаје 10пк мрежу између кутија. Ако не желиш никакву празнину само уклони ову имовину.

 .враппер дисплаи: грид; грид-темплате-цолумнс: 1фр 1фр 1фр; грид-темплате-ровс: 200пк 200пк; грид-гап: 10пк;  .бок цолор: вхите; тект-алигн: центар; фонт-сизе: 30пк; паддинг: 25пк;  

Имајте на уму да ЦСС изнад не садржи неке основне стилове као што су боје позадине. Можете наћи пун код у демо-у на крају чланка.

Промени однос

Наравно, не можете користити само 1: 1: 1 али било који однос који желите. Испод сам користио 1: 2: 1 фракције који такође деле простор на три колоне али средња колона ће бити два пута шире као и друга два.

Такође сам повећао вредност грид-гап тако да можете да видите како мења изглед. У основи, прегледник одузима размак мреже од ширине оквира за приказ (у овом примеру, празнине у мрежама додају до 80пк), и исече остатак према датим фракцијама.

 .враппер дисплаи: грид; грид-темплате-цолумнс: 1фр 2фр 1фр; грид-темплате-ровс: 200пк 200пк; грид-гап: 40пк;  

Комбинирај фр са другим ЦСС јединицама

Можете комбиновати тхе фр са било које друге ЦСС јединице такође. На пример, у примеру испод, користио сам 60% 1фр 2фр омјер за моју мрежу.

Како то функционира? Тхе претраживач додељује 60% ширине приказа у прву колону. Затим, остатак простора дели на 1: 2 фракције.

Исто би се могло написати као 60% 13.33333% 26.66667%. Али искрено, зашто би ико желио да користи тај формат? Велика предност јединице фракција је у томе побољшава читљивост кода. Штавише, то је потпуно тачно, пошто је проценат у формату још увек 99.9999%.

 .враппер дисплаи: грид; грид-темплате-цолумнс: 60% 1фр 2фр; грид-темплате-ровс: 200пк 200пк; грид-гап: 10пк;  

Поред процента, можете користити и друге ЦСС јединице заједно са јединицом фракција, на пример пт, пк, ем, и рем.

Додајте размак са фр

Шта ако не желите да ваш дизајн буде претрпан додајте мало размака на вашу мрежу? Јединица за фракцију такође има лако решење за то.

Као што видите, ова мрежа има празну колону док и даље задржава свих шест кутија. За овај распоред, морамо исећи простор горе у четири ступца уместо три. Дакле, ми користимо 1фр 1фр 1фр вредност за грид-темплате-цолумн својство.

Унесемо празну колону унутар грид-темплате-ареас имовине, користећи нот нотатион. У основи, ово својство вам дозвољава референтне именоване области мреже. И, можете да назовете мрежна подручја са грид-ареа имовине коју требате користити посебно за свако подручје.

 .враппер дисплаи: грид; грид-темплате-цолумнс: 1фр 1фр 1фр 1фр; грид-темплате-ровс: 200пк 200пк; грид-гап: 10пк; грид-темплате-ареас: "бок-1 бок-2. бок-3" "бок-4 бок-5. бок-6";  .бок-1 грид-ареа: бок-1;  .бок-2 грид-ареа: бок-2;  .бок-3 грид-ареа: бок-3;  .бок-4 грид-ареа: бок-4;  .бок-5 грид-ареа: бок-5;  .бок-6 грид-ареа: бок-6;  

Подручја празног простора не мора нужно да формирате колону, они може бити било гдје у мрежи.

Тхе понављање() функције

Можете користити и фр јединица заједно са понављање() функције За једноставнија синтакса. , ово није неопходно ако имате само једноставну мрежу, али можете да вам помогне када желите имплементирати компликован распоред, на пример а нестед грид.

 .враппер дисплаи: грид; грид-темплате-цолумнс: репеат (3, 1фр); / * грид-темплате-цолумнс: 1фр 1фр 1фр; * / грид-темплате-ровс: 200пк; грид-гап: 10пк;  

Тхе поновити (3, 1фр) синтакса резултате у истом распореду као 1фр 1фр 1фр. Изглед испод је исти као и први пример.

ако ти повећава мултипликатор унутар понављање() функција ће имати више колона. На пример, поновити (6, 1фр) Резултати шест једнаких колона. У овом случају, све наше кутије ће бити у истом реду, што значи да је довољно користити само једну вриједност (200пк) за грид-темплате-ровс својство.

 .враппер дисплаи: грид; грид-темплате-цолумнс: репеат (6, 1фр); грид-темплате-ровс: 200пк; грид-гап: 10пк;  

Можете користити понављање() Више од једанпут. На пример, следећи пример даје решетку у којој су последње три колоне два пута шире као прва три.

 .враппер дисплаи: грид; грид-темплате-цолумнс: репеат (3, 1фр) репеат (3, 2фр); грид-темплате-ровс: 200пк; грид-гап: 10пк;  

Можете такође комбиновати понављање() са другим ЦСС јединицама. На пример, можете користити 200пк репеат (4, 1фр) 200пк као важећи код.

Ако вас занима како створите сложене распореде са ЦСС Грид модулом, понављање() функције и фр Јединица Рацхел Андрев има занимљив блог пост о томе како то можете учинити.

Демо за експериментисање

Коначно, ево демо којег сам обећао. Она користи исти код као први пример у овом чланку. Форк ит, и види шта можеш постићи са фр јединица.