Въведение в модула за оформление на мрежата CSS
Това беше веднъж маси, тогава маржове и плувки, тогава flexbox и сега решетка: CSS винаги се насочва към нови и по-добри начини за облекчаване на вековната работа на кодиране на уеб оформления. Най- Модел на оформлението на мрежата на CSS може да създава и актуализира оформлението по две оси: хоризонтално и вертикално, засягащи както ширината, така и височината на елементите.
Разположението на мрежата не зависи от позицията на елементите в маркировката, следователно, можете разбъркайте разположенията на елементи в маркиране, без да се променя оформлението. В решетъчния модел, контейнерът на мрежата е разделени на колони и редове (общо известен като релси) от мрежови линии. Сега да видим как създайте примерна мрежа.
Поддръжка на браузър
От написването на тази статия, CSS Grid Module се поддържа само от най-новия IE браузър и Edge. CSS мрежата е в експериментален етап в другите основни браузъри, в които трябва активирайте ръчно поддръжката:
- Firefox: Натиснете Shift + F2, въведете следната команда в лентата за въвеждане на GCLI, която се показва в долната част на браузъра:
pref set layout.css.grid.enabled е вярно. - Chrome: Прегледайте
хром: // знаменаURL и активирайтеФункции на експериментална уеб платформа.
Всички основни поддръжка на браузъри е вероятно дойде в началото / средата на 2017 г..
Примерна мрежа
Да се превърнете елемент в решетъчен контейнер можеш да използваш един от тези три показ Имоти:
дисплей: решетка;- елементът е преобразува в контейнер на блок-мрежадисплей: вградена мрежа;- елементът е преобразува в редови контейнердисплей: подсектор;- ако елементът е елемент от мрежата преобразува в подсектор който игнорира свойствата на шаблона на мрежата и на пропуските в мрежата
Точно както таблицата се състои от множество клетки на таблицата, така и таблицата е състояща се от множество клетки от мрежата. Елемент от мрежата е зададен за набор от клетки от мрежата което е общоизвестно като мрежа.
Ще създадем мрежа с пет секции (решетки): отгоре, отдолу, отляво, отдясно и в средата. HTML се състои от пет divs в контейнер div.
ВръхНалявоцентърправдъно
В CSS, на мрежата-шаблон-области Имот определя мрежа с различни мрежови области. В своята стойност, низ представлява ред на решетката и всяко валидно име в низ представлява колона. Да се създайте празна клетка от мрежата трябва да използвате точка (.) характер в ред от ред.
Най- имена на мрежови области трябва да се посочват от решетка площ собственост на отделните елементи на мрежата.
.решетъчен контейнер ширина: 500px; височина: 500px; дисплей: решетка; grid-template-areas: "отгоре отгоре" "вляво вдясно" "отдолу долу"; .grid-top grid-area: отгоре; .grid-bottom grid-area: bottom; .grid-left grid-area: left; .grid-right grid-area: right; .grid-center grid-area: center;
Така този код създава решетка с три реда и колони. Най- връх елемент заема площ, която се простира над три колони в първия ред и дъно елемент обхваща над три колони в последния ред. Всеки от наляво, център и прав отнема една колона в средния ред.
Сега трябва присвоите размери към тези редове и колони. Най- решетка шаблон колони и решетка-шаблон-редове Имоти определете размера на трасето на мрежата (ред или колона).
.решетъчен контейнер ширина: 500px; височина: 500px; дисплей: решетка; grid-template-areas: "отгоре отгоре" "вляво вдясно" "отдолу долу"; grid-template-колони: 100px auto 100px; grid-template-rows: 50px auto 150px;
Така изглежда сега нашата CSS мрежа (с някои допълнителни стилове):
Пространство между елементите на мрежата
Можете да добавите празно пространство между колоните и редовете използвайки решетка колона междина и решетка ред междина, или тяхната собственост на дългите ръце решетка междина.
.решетъчен контейнер ширина: 500px; височина: 500px; дисплей: решетка; grid-template-areas: "отгоре отгоре" "вляво вдясно" "отдолу долу"; grid-template-колони: 100px auto 100px; grid-template-rows: 50px auto 150px; разстояние между решетките: 5px 5px;
По-долу можете да видите, че решетка междина собственост добави пропуски между елементите на мрежата наистина.
Подравнете съдържанието на мрежата и елементите
Най- оправдае съдържание собственост на решетъчния контейнер (.решетка контейнер) подравнява съдържанието на мрежата по вътрешната ос (хоризонтална ос) и имота приведе съдържание, подравнява съдържанието на мрежата по оста на блока (вертикална ос). И двата имота може да има една от тези стойности: начало, край, център, пространство между, пространство около и пространство-равномерно.
Където е приложимо, размера на коловоза (ред или колона) свива, за да отговаря на съдържанието когато е подравнен. Разгледайте снимките на екрана на съдържанието на мрежата изравнени с различни стойности По-долу.
justify-content: start;
justify-content: end;
justify-content: център;
justify-content: space-between;
justify-content: space-around;
justify-content: равномерно пространство;
align-content: начало;
align-content: end;
align-content: център;
align-content: пространство-между;
align-content: пространство около;
align-content: равномерно пространство;
И двете оправдае съдържание и приведе съдържание Имоти подравнете цялото съдържание в мрежата.
Да се да подравнявате отделни елементи в техните мрежови области, използвай друга двойка свойства за подравняване: оправдае-елементи и приведе-елементи. И двете могат да имат една от тези стойности: начало, край, център, изходното ниво (подравнете елементите по основната линия на мрежата на зоната) и опъвам, разтягам (елементите запълват цялата им област).
