Увод у ЦСС Грид Лаиоут Модуле

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

Распоред мреже не зависи од позиције елемената у маркупу, стога можете измијешати положаје елемената у маркупу без промене изгледа. У решетком моделу, елемент контејнера је подељени на колоне и редове мреже (колективно познат као грид трацкс) од стране грид линес. Сада да видимо како направите узорак мреже.

Подршка за претраживач

Од писања овог чланка, ЦСС Грид модул је подржан само од стране најновијег ИЕ претраживача и Едге-а. ЦСС Грид је у експерименталној фази у другим главним претраживачима у којима морате омогућите подршку ручно:

• Фирефок: Притисните Схифт + Ф2, унесите следећу команду у траку за унос ГЦЛИ која се појавила на дну прегледача: преф сет лаиоут.цсс.грид.енаблед труе.
• Хром: Бровсе тхе цхроме: // флагс УРЛ и омогућите Експерименталне функције Веб платформе.

Вјероватно ће подршка за све главне прегледнике долазе почетком / средином 2017.

Табела узорака

До окренути елемент у решеткасти контејнер можете користити један од ова три приказ својства:

1. дисплаи: грид; - елемент је претворена у контејнер блок мреже
2. дисплеј: инлине-грид; - елемент је конвертован у инлине грид контејнер
3. дисплаи: субгрид; - ако је елемент елемент мреже претворена у субгрид који игнорише својства матрице мреже и решетке мреже

Као што се табела састоји од више ћелија табеле, тако је и решетка састоји се од више ћелија мреже. Ставка мреже је додељен скупу ћелија мреже то је колективно познато као грид ареа.

Створићемо решетка са пет секција (решетке): горњи, доњи, леви, десни и центар. ХТМЛ се састоји од пет дивс унутар контејнера див.

 
 
Топ
 
Лево
 
центар
 
Јел тако
 
Дно
 
 

У ЦСС-у грид-темплате-ареас својство дефинира мрежу са различитим мрежама. У својој вредности, стринг представља ред реда и свако важеће име у оквиру низа представља колону. До направите празну ћелију мреже морате користити тачка (.) карактер унутар низа реда.

Тхе имена мреже на које се упућује грид-ареа својства појединачних решеткастих ставки.

 .грид-цонтаинер ширина: 500пк; хеигхт: 500пк; дисплаи: грид; грид-темплате-ареас: "топ топ топ" "лијево десно" "боттом боттом боттом";  .грид-топ грид-ареа: топ;  .грид-боттом грид-ареа: боттом;  .грид-лево грид-ареа: лефт;  грид-ригхт грид-ареа: ригхт;  .грид-центар грид-ареа: центер;  

Дакле, овај код ствара решетка са три реда и колона. Тхе топ ставка заузима подручје које се протеже преко три колоне у првом реду анд тхе дно итем спанс овер три колоне у последњем реду. Сваки од лево, центар и јел тако ставке траје једна колона у средњем реду.

Сада морамо додели димензије овим редовима и колонама. Тхе грид-темплате-цолумн и грид-темплате-ровс својства одредите величину мреже (ред или колона).

 .грид-цонтаинер ширина: 500пк; хеигхт: 500пк; дисплаи: грид; грид-темплате-ареас: "топ топ топ" "лијево десно" "боттом боттом боттом"; грид-темплате-цолумнс: 100пк ауто 100пк; грид-темплате-ровс: 50пк ауто 150пк;  

Овако изгледа наша ЦСС мрежа (са неким додатним стиловима):

Размак између елемената мреже

Можеш додати празан простор између колона и редова Користећи грид-цолумн-гап и грид-ров-гап, или њихова дугорочна имовина грид-гап.

 .грид-цонтаинер ширина: 500пк; хеигхт: 500пк; дисплаи: грид; грид-темплате-ареас: "топ топ топ" "лијево десно" "боттом боттом боттом"; грид-темплате-цолумнс: 100пк ауто 100пк; грид-темплате-ровс: 50пк ауто 150пк; грид-гап: 5пк 5пк;  

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

Поравнајте садржај мреже и ставке

Тхе јустифи-цонтент својство решеткастог контејнера (.грид-цонтаинер) поравнава садржај мреже дуж инлине оси (хоризонтална оса) и имовине алигн-цонтент, поравнава садржај мреже дуж оси блока (вертикална оса). Оба својства може имати једну од ових вредности: почетак, крај, центар, размак између, спаце-ароунд и просторно равномерно.

Где је то могуће, величина стазе (реда или колоне) смањује се како би одговарао садржају када је поравнат. Погледајте сцреенсхотове садржаја мреже поравнати са различитим вредностима испод.

јустифи-цонтент: старт;

јустифи-цонтент: енд;

јустифи-цонтент: центар;

јустифи-цонтент: простор-између;

јустифи-цонтент: простор-около;

јустифи-цонтент: просторно равномерно;

алигн-цонтент: старт;

алигн-цонтент: енд;

алигн-цонтент: центар;

алигн-цонтент: размак између;

алигн-цонтент: простор-около;

алигн-цонтент: просторно равномерно;

Оба јустифи-цонтент и алигн-цонтент својства поравнајте цео садржај унутар мреже.

До поравнајте појединачне ставке унутар њихових подручја мреже, користити други пар својстава поравнања: јустифи-итемс и алигн-итемс. Обе могу имати једну од ових вредности: почетак, крај, центар, основна линија (поравнајте ставке дуж основне линије мреже) и стретцх (ставке попуњавају целу област).