Премјештање ставки у ЦСС распореду мреже [Водич]
Помоћу ЦСС Грид Лаиоут Модуле у веб дизајну постаје све више и више изводљиво како више претраживача почне подржите га. Када креирате обрасце који попуњавају ћелије решетки, можда ће доћи тренутак када желите да постигнете компликованије ствари.
На пример, можда желите лагано се крећу неке од решетки су се заглавиле у њиховим мрежама. Можда би желела преместите их из контејнера (преливање), или један преко другог (преклапају се), или само… на неки празан простор около.
Дакле, у овом посту, показат ћу вам како можете ставке за кретање, редослед, преливање, преклапање и величину када користите ЦСС Грид Лаиоут Модуле.
Креирајте ЦСС мрежу
Прво, направимо једноставну ЦСС мрежу са један ред и три колоне.
У ХТМЛ-у креирамо гомилу дивова где је контејнер за мрежу садржи три ставке мреже.
У ЦСС-у, мрежни контејнер поседује дисплаи: грид; својство и ставке мреже имати грид-ареа који идентифицира имена подручја ставки мреже.
Ми такође Додајте грид-темплате-ареас својство у контејнер решетке, у којем су навикнута имена мрежних подручја додијелити подручја мреже мрежама ћелија које представљају.
Све колоне узети величину једне фракције (фр) ширине контејнера, чиме се осигурава задржавање елемената решетке.
.грид-цонтаинер дисплаи: грид; грид-темплате-ареас: 'лефт центер ригхт'; грид-темплате-цолумнс: репеат (3, 1фр); грид-темплате-ровс: 80пк; грид-гап: 5пк; видтх: 360пк; позадинска боја: магента; .грид-лево грид-ареа: лефт; .грид-центар грид-ареа: центер; грид-ригхт грид-ареа: ригхт; .грид-цонтаинер див бацкгроунд-цолор: лигхтгреен;
Оверфлов грид итемс
Можете направити елемент мреже прелити свој мрежни контејнер ако је потребно за распоред. Да бисте постигли ефекат преливања, само требате користите другу величину ступца:
.грид-цонтаинер дисплаи: грид; грид-темплате-ареас: 'лефт центер ригхт'; грид-темплате-цолумнс: репеат (3, 150пк); грид-гап: 5пк;
Тхе сума величине колоне и јаза је већи од ширина контејнера, што узрокује преливање елемената мреже.
Преклапање решетке
А ставка се може преклапати (потпуно или делимично покривање) другу ставку мреже у следећим случајевима:
- Подешено је да се протеже преко ћелија (или више њих) друге ставке мреже.
- Његова величина је повећана, због чега се преклапа са оближњом мрежном ставком.
- Премештен је на врху друге ставке мреже.
Касније ћемо разговарати о другом и трећем случају “Сизинг” и “Мовинг” секције.
Прво, хајде да видимо први случај када је решетка прелази преко другог.
Ставка решетке у центру има прелазе преко леве, тако да су само две ставке видљиве на екрану.
.грид-центар грид-ареа: центар; решетка-колона: 1/3;
Тхе грид-цолумн и грид-ров својства додели линије мреже између којих колона или ред треба да стане.
На доњем дијаграму можете видети како грид-цолумн: 1/3 ЦСС правило ради: централна колона прелази између линија 1 и 3. Као резултат, централна колона преклапа се са левом.
Премести ставке мреже
Померањем, мислим померање ствари мало около. Ако у потпуности желите да преместите ставку у другу ћелију / област мреже, препоручујем вам да ажурирате код креирања мреже.
Кретање по решеткама је једноставно. Само користити маргин, тхе трансформисати, или позиција: релативна; својства. Погледајте ниже како се ставке померају користећи те особине.
Средишње и десно решеткасте ставке могу се померити (као што је приказано горе) на следеће начине:
1. Кориштење маргин
Негативне маргине повећавају димензије елемената мреже, док их позитивне маргине смањују. Користећи комбинацију оба, можете померати ставке мреже.
.грид-центар грид-ареа: центар; маргин-лефт: -10пк; маргин-ригхт: 10пк; маргин-топ: -10пк; маргин-боттом: 10пк; грид-ригхт грид-ареа: ригхт; маргин-лефт: 10пк; маргин-ригхт: -10пк; маргин-топ: -10пк; маргин-боттом: 10пк;
2. Коришћење трансформисати
Тхе превести() ЦСС функција помера елемент дуж оси к и и. Користећи га заједно са трансформисати својство вам омогућава да промените позицију ставке мреже.
.грид-центар грид-ареа: центар; трансформ: транслате (-10пк, -10пк); грид-ригхт грид-ареа: ригхт; трансформ: транслате (10пк, -10пк);
3. Коришћење позицију
Помоћу позиција: релативна; правило са наведеним топ, дно, лево, и јел тако својства се могу користити и за кретање по решеткама.
.грид-центар грид-ареа: центар; позиција: релативна; боттом: 10пк; десно: 10пк; грид-ригхт грид-ареа: ригхт; позиција: релативна; боттом: 10пк; лево: 10пк;
Ордер грид итемс
Ставке мреже се приказују на екрану редоследом којим се појављују у ХТМЛ изворном коду.
У претходном одељку, када је централна ставка померана лево, она је постављена на врх леве ставке прегледача. То се десило зато што је у ХТМЛ-у, Међутим, можемо промените ставке реда налога помоћу Помоћу Као у ЦСС Грид Лаиоут модулу, мењајући редослед елемената у ХТМЛ-у не утиче на распоред мреже, такође можете ставити Ако користите ретке или колоне за аутоматску величину за ставку мреже (користећи Запамтите, у нашем узорку мреже све три колоне узимају једну фракцију ( Овдје мијењамо величину лијеве ставке помоћу Овдје мијењамо величину лијеве ставке помоћу з-индек или ред ЦСС својства.
з-индекс: 1; правило, леви део решетке добио је већи контекст слагања.. грид-лефт грид-ареа: лефт; з-индекс: 1;
Величина решетке
ауто, фр, гр јединица), она ће се смањити да направи простор за суседну ставку која је порасла у величини само ако споменути предмет није била одређена трансформисати или негативна маргина.фр) решеткастог контејнера. Погледајте како изгледају све три ставке након што се лијева промијени на два различита начина.1. Величина са
видтх и хеигхтвидтх и хеигхт својства. Као резултат, остаје унутар решеткастог контејнера.
.грид-лефт грид-ареа: лефт; видтх: 200пк; хеигхт: 90пк;
2. Сизед витх
трансформисатитрансформисати својство. Као резултат, преливање контејнера и расцјеп решетке такођер нестаје.
.грид-лефт грид-ареа: лефт; трансформ: сцалек (1.8);
