Преместване на елементи в оформлението на мрежата на CSS [Ръководство]
Използвайки CSS модул за оформление на мрежата в уеб дизайна става все по-осъществимо с повече браузъри го подкрепят. При създаването на оформления, запълващи клетките на мрежата, може да се появи момент, когато искате да постигнете по-сложни неща.
Например, може да искате да леко се движат някои от елементите на мрежата са заседнали в техните мрежови зони. Вие също може да искате преместете ги от контейнера на мрежата (препълване), или един над друг (припокриване), или просто… до някакво празно пространство наоколо.
Така че в този пост ще ви покажа как можете елементи на преместване, подреждане, преливане, припокриване и размер когато използвате CSS Grid Layout Module.
Създайте CSS мрежа
Първо, нека създадем проста CSS мрежа с един ред и три колони.
В HTML, ние създаваме куп divs, където контейнерът на мрежата съдържа трите решетки.
В CSS, контейнерът на мрежата има дисплей: решетка; Имот и елементите на мрежата имам решетка площ който идентифицира имената на областите на елементите на мрежата.
Ние също добавете мрежата-шаблон-области Имот към контейнера на мрежата, в който са използвани имената на мрежовите области задайте областите на решетката на клетките на мрежата, които те представляват.
Всички колони поемат размера на една фракция (FR) на ширината на контейнера, като се гарантира задържането на решетките.
.решетъчен контейнер дисплей: решетка; grid-template-области: "ляво дясно център"; решетка-шаблон-колони: повторение (3, 1fr); grid-template-rows: 80px; разстояние между решетките: 5px; ширина: 360px; фонов цвят: магента; .grid-left grid-area: left; .grid-center grid-area: center; .grid-right grid-area: right; .grid-container div цвят на фона: светлозелен;
Преливни елементи от мрежата
Можете да направите елемент от мрежата препълнете контейнера му ако е необходимо за оформление. За да постигнете ефект на преливане, просто трябва използвайте различен размер на колона:
.решетъчен контейнер дисплей: решетка; grid-template-области: "ляво дясно център"; решетка-шаблон-колони: повторение (3, 150px); разстояние между решетките: 5px;
Най- сума от размера на колоната и пропастта е по-голям от ширина на контейнера, което води до препълване на решетките на контейнера.
Припокриват елементи от мрежата
А позиция на мрежата може да се припокрива (напълно или частично покритие) друг елемент от мрежата в следните случаи:
- Той е настроен да обхваща (и над) клетката (клетките) на друг елемент от мрежата.
- Неговият размер е увеличен, което води до припокриване с близкия елемент от мрежата.
- Премества се върху друга позиция в мрежата.
Ще обсъдим втория и третия случай по-късно, в “Оразмеряване” и “Движещ се” секции.
Първо, нека видим първия случай, когато елемент от мрежата обхваща друг.
Елементът от мрежата в центъра има надвиши над лявата, така че само два елемента са видими на екрана.
.решетъчен център grid-area: център; решетка-колона: 1/3;
Най- решетка-колона и решетка ред Имоти присвоите линии на мрежата между които една колона или ред трябва да се вмести.
На диаграмата по-долу можете да видите как решетка-колона: 1/3 Правилото за CSS работи: централната колона обхваща между линиите 1 и 3 на решетката. В резултат на това централната колона припокрива лявата.
Преместете елементите от мрежата
Като се движа, искам да кажа преместване на елементите леко наоколо. Ако напълно искате да преместите елемент в друга клетка / област на мрежата, препоръчвам ви да актуализирате кода за създаване на мрежата.
Преместването около елементите на мрежата е просто. Просто използвай марж, на трансформиране, или позиция: относителна; Имоти. Вижте по-долу как елементите се преместват с тези свойства.
Централната и дясната решетка могат да бъдат преместени (както е показано по-горе) по следните начини:
1. Използване марж
Отрицателните граници увеличават размерите на решетките, а положителните полета ги отрязват. Като използвате комбинация от двете, можете да преместите елементите на мрежата наоколо.
.решетъчен център grid-area: център; margin-left: -10px; margin-right: 10px; margin-top: -10px; margin-bottom: 10px; .grid-right grid-area: right; margin-left: 10px; margin-right: -10px; margin-top: -10px; margin-bottom: 10px;
2. Използване трансформиране
Най- превеждам () CSS функция премества елемент по осите x и y. Използването му заедно с трансформиране property ви позволява да промените позицията на елемента от мрежата.
.решетъчен център grid-area: център; transform: translate (-10px, -10px); .grid-right grid-area: right; transform: translate (10px, -10px);
3. Използване позиция
Използвайки позиция: относителна; правило с посоченото връх, дъно, наляво, и прав Свойствата могат да се използват и за придвижване по решетки.
.решетъчен център grid-area: център; позиция: относителна; дъно: 10px; вдясно: 10px; .grid-right grid-area: right; позиция: относителна; дъно: 10px; наляво: 10px;
Поръчайте елементи от мрежата
Елементите на решетката се визуализират на екрана в реда, в който се появяват в изходния HTML код.
В предишния раздел, когато централният елемент е преместен наляво, той е поставен в горната част на левия елемент от браузъра. Това се случи, защото в HTML, Но можем променете елементите на поръчката използвайки Използвайки Както в модула CSS Grid Layout, променяйки реда на елементите в HTML не засяга оформлението на мрежата, можете също да сложите Ако използвате редове или колони с автоматичен размер за елемент от мрежата (използвайки Не забравяйте, че в нашата примерна мрежа всичките три колони поемат една фракция ( Тук променяме размера на левия елемент използвайки Тук променяме размера на левия елемент използвайки Z-индекс или поръчка CSS свойства.
z-индекс: 1; правило, лявата позиция на мрежата има по-висок контекст на подреждане.. отляво grid-area: left; z-индекс: 1;
Размери на мрежата
Автоматичен, FR, гр единици), той ще се свие, за да направи място за съседния си елемент, който е нараснал в размер само ако споменатия елемент не е оразмерен трансформиране или отрицателен марж.FR) на решетъчния контейнер. Обърнете внимание как изглеждат трите елемента, след като размерът на лявата се променя по два различни начина.1. Размер с
широчина и височинаширочина и височина Имоти. В резултат на това той остава вътре в контейнера на мрежата.
.отляво grid-area: left; ширина: 200px; височина: 90px;
2. Размери с
трансформиранетрансформиране Имот. В резултат на това той препълва контейнера и отворът на решетката също изчезва.
.отляво grid-area: left; transform: scalex (1.8);
