Ръководство за CSS грид оформление Fr единица
Най- CSS модул за оформление на мрежата бе доставен с a нова CSS единица наречена FR мерна единица. Колкото и да е лесно, FR е съкращение на думата “фракция”. Новото устройство позволява бързо да се нарязва мрежата в пропорционални колони или редове. В резултат на това, създаването на напълно гъвкави и гъвкави мрежи става почти бриз.
Тъй като фракционният модул беше въведен заедно с модула Grid Layout, можете да го използвате във всеки браузър, който поддържа мрежата на CSS. Ако искате да поддържате и по-старите браузъри, тук е страхотно CSS решетка което ви позволява да използвате не само FR единица, но и други мрежови характеристики.
Основно използване
Първо, нека погледнем a основна мрежа който използва фракционната единица. Разпределението по-долу разделя пространството три колони с еднаква ширина и два реда с еднаква височина.
Принадлежащият HTML код е съставен от шест дива маркирани с .кутия клас, вътре .халат Разделение.
1.2.3.4.5.6.
За да използвате модула Grid Layout, трябва да добавите дисплей: решетка; CSS свойство на обвивката. Най- решетка шаблон колони собственост използва FR единица като стойност; на съотношението на трите колони е 1: 1: 1.
За редовете в мрежата (решетка-шаблон-редове собственост), не използвах FR единица, тъй като има смисъл само ако обвивката има фиксирана височина. В противен случай може да има странни резултати на някои устройства, дори и тогава FR мерна единица поддържа съотношението (и това е огромно).
Най- решетка междина Имот добавя мрежа от 10 пиксела между кутиите. Ако не искате някаква празнина, просто премахнете този имот.
.обвивка дисплей: решетка; решетка-шаблон-колони: 1fr 1fr 1fr; grid-template-rows: 200px 200px; разстояние между решетките: 10px; .box цвят: бял; text-align: center; размер на шрифта: 30px; пълнеж: 25px;
Забележете, че CSS по-горе не съдържа някои основни стилове, като фонови цветове. Можеш намерете пълния код в демото в края на статията.
Промяна на съотношението
Разбира се, не можете да използвате само 1: 1: 1, но всяко съотношение, което искате. По-долу използвах 1: 2: 1 фракции които също разделят пространството на три колони но средната колона ще бъде два пъти по-широк като другите две.
Повиших и стойността на решетка междина така че можете да видите как променя оформлението. По принцип, браузърът изважда пропастта на мрежата от ширината на екрана за изглед (в този пример, пропуските на мрежата добавят до 80px), и нарязва останалото според дадените фракции.
.обвивка дисплей: решетка; решетка-шаблон-колони: 1fr 2fr 1fr; grid-template-rows: 200px 200px; разстояние между решетките: 40px;
комбайн FR с други единици CSS
Можеш комбайн на FR единица с други CSS единици също. Например в примера по-долу използвах 60% 1fr 2fr съотношение за моята мрежа.
И така, как работи това? Най- Браузърът присвоява 60% от ширината на екрана към първата колона. След това разделя останалата част от пространството на 1: 2 фракции.
Същото нещо може да бъде написано и като 60% 13.33333% 26.66667%. Но честно казано, защо някой би искал да използва този формат? Голямо предимство на фракционната единица е това подобрява четимостта на кода. Нещо повече, това е напълно точна, като процентният формат все още добавя само до 99,9999%.
.обвивка дисплей: решетка; решетка-шаблон-колони: 60% 1fr 2fr; grid-template-rows: 200px 200px; разстояние между решетките: 10px;
Освен процентите, можете да използвате и други CSS единици например с фракционната единица pt, пиксела, ем, и вещни.
Добавете празно пространство с FR
Какво ще стане, ако не искате дизайнът ви да бъде претрупан и добавете малко празно пространство към вашата мрежа? Фракционната единица също има лесно решение за това.
Както виждате, тази мрежа има празна колона докато все още запазва всичките шест кутии. За това оформление трябва да разделим пространството в четири колони вместо три. Така че, ние използваме 1fr 1fr 1fr 1fr стойност за решетка шаблон колони Имот.
Добавяме празната колона в полето мрежата-шаблон-области собственост, използвайки точка нотация. По принцип, това свойство ви позволява референтни, наречени решетки. И можете да наречете мрежовите зони с решетка площ имот, който трябва да използвате отделно за всяка област.
.обвивка дисплей: решетка; решетка-шаблон-колони: 1fr 1fr 1fr 1fr; grid-template-rows: 200px 200px; разстояние между решетките: 10px; решетъчни области: "кутия-1 кутия-2. кутия-3" "кутия-4 кутия-5. .box-1 grid-area: box-1; .box-2 grid-area: box-2; .box-3 решетъчна област: кутия-3; .box-4 решетъчна област: кутия-4; .box-5 площ на мрежата: кутия-5; .box-6 решетъчна област: кутия-6;
Пространствените области не е задължително да образувате колона, те може да бъде навсякъде в мрежата.
Най- Повтарям () функция
Можете да използвате и FR мерна единица заедно с Повтарям () функция за по-прост синтаксис. , това не е необходимо, ако имате проста мрежа, но може да ви бъде от полза, когато искате реализира сложно оформление, например a вложена мрежа.
.обвивка дисплей: решетка; решетка-шаблон-колони: повторение (3, 1fr); / * grid-template-колони: 1fr 1fr 1fr; * / grid-template-rows: 200px; разстояние между решетките: 10px;
Най- повторение (3, 1фр) синтаксис резултатите в същото оформление като 1fr 1fr 1fr. Подредбата по-долу е същата като първия пример.
Ако ти увеличаване на множителя вътре Повтарям () ще имате повече колони. Например, повторение (6, 1фр) резултати в шест равни колони. В този случай всичките ни кутии ще бъде в същия ред, което означава, че е достатъчно да използвате само една стойност (200px) за решетка-шаблон-редове Имот.
.обвивка дисплей: решетка; решетка-шаблон-колони: повторение (6, 1fr); grid-template-rows: 200px; разстояние между решетките: 10px;
Можеш да използваш Повтарям () повече от веднъж. Например, следният пример води до мрежа, в която са последните три колони два пъти по-широк като първите три.
.обвивка дисплей: решетка; решетка-шаблон-колони: повторение (3, 1fr) повторение (3, 2fr); grid-template-rows: 200px; разстояние между решетките: 10px;
Можете също комбайн Повтарям () с други единици CSS. Например, можете да използвате 200px repeat (4, 1fr) 200px като валиден код.
Ако се интересувате от това как създаване на сложни оформления с модула CSS Grid, Повтарям () функция и FR единица Рейчъл Андрю има интересен блог пост за това как можете да направите това.
Демо за експериментиране
накрая, Ето демото, което обещах. Той използва същия код като първия пример в тази статия. Разклонете го и вижте какво можете да постигнете с FR мерна единица.
