Изчерпателно ръководство за използване на CSS Grid

CSS Grid: Бързи връзки

Как да дефинирам мрежата
Позиционирайте елементите, като използвате номера на редове
Позиционирайте елементи, като използвате имена на области
Създайте отзивчиво оформление
Отстъпки за по-стари браузъри
CSS Grid ресурси

Модулът CSS Grid Layout представя нова и универсална система за позициониране на елементи в рамките на оформление на уебсайта чрез използването на изключително адаптивна мрежа. CSS Grid вече се поддържа от последните две версии на всички основни браузъри, така че е време да започнем да го приемаме във всички наши проекти. В този урок ще разгледаме задълбочено как да използваме основните свойства на CSS Grid.



За други опции вижте нашето ръководство за най-доброто уеб конструктор . И не забравяйте да проверите вашата уеб хостинг работи за нуждите на вашия сайт.



Какво е CSS Grid?

CSS мрежа

най-добър компютър за видеомонтаж 2016
С помощта на CSS Grid дизайнерите могат да създават напълно различни оформления, специфични за устройството, в чист CSS

CSS Grid е изключително мощен инструмент за оформление на елементи. Той въвежда безпрецедентна гъвкавост в оформлението, използвайки само чист CSS и без абсолютно позициониращи елементи (техника, която може да доведе до много проблеми). CSS Grid ни позволява да постигнем изключително разнообразни и специфични за устройството оформления от една и съща точна HTML маркировка.



Вече не трябва да разчитаме на хакове, абсолютно позициониране или манипулиране на DOM на JavaScript, за да реализираме динамични оформления, променящи формата. CSS Grid дава на дизайнерите празно платно, за да създадат каквито желаят оформления, без да се притесняват как да го постигнат, въвеждайки нова ера на уеб дизайн и разработка със свобода от ограниченията и заобикалящите решения на CSS от миналото.

Как да дефинирам мрежата

За да се създаде решетка в контейнер, тя трябва да получи свойството CSS дисплей: мрежа . Броят на колоните и редовете се определя от броя разделителни раздели, присвоени на мрежа-шаблон-колони и grid-template-редове съответно .

Размерите могат да бъдат всяка валидна CSS единица като px или vw , или Автоматичен ключова дума, която позволява на колоните или редовете да се простират в наличното пространство. Например, grid-template-колони: 10px автоматично води до колона 10px, последвана от втора колона, която запълва цялото налично пространство.



Мрежата също използва „дробна“ единица fr което води до разпределяне на оставащото пространство в колони или редове въз основа на съотношенията на тези единици. мрежа-шаблон-редове: 1fr 2fr създава два динамични реда с втория размер два пъти по-голям от първия, докато grid-template-колони: 1fr 1fr 1fr 1fr дефинира четири еднакви по размер колони. Последното може да бъде опростено с помощта на новото повторение () функция към grid-template-колони: повторение (4, 1fr) .

решетка с номера 1-16 в нея

Решетка с еднакво големи клетки в резултат на колони с равно съотношение, динамична ширина и редове с височина 75px

Следователно може да се създаде мрежа в контейнер от мрежа от клас с четири динамични колони с еднакъв размер и четири редове с височина 75px (както е показано по-горе), като се използва:

.grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 75px); }

Сложни решетки с неравномерни клетки могат да бъдат създадени чрез комбиниране на различните единици, споменати по-рано. Можем да използваме и minmax () функция за определяне на минималния и максималния размер на динамичните колони и редове. Следователно, решетка-шаблон-редове: 40px 2fr повторение (2, minmax (75px, 1fr)) води до четири реда с първия 40px висок, останалите три се простират върху оставащото пространство в съотношение 2: 1: 1, а последните два имат минимална височина 75px, което определя минималната височина на втория ред на 150px.

След като се създаде мрежа, линиите на мрежата, представени с пунктирани линии в изображенията, автоматично се номерират отгоре за редове или отляво за колони. На редовете се дава и второ отрицателно число спрямо техния индекс отдолу за редове или отдясно за колони.

Например, първата пунктирана вертикална линия вляво в горните решетки е 1 и -5 , а третият ред е 3 и -две . Тези числа могат да се използват като гранични линии на елементи, поставени в мрежата. Линиите на мрежата също могат да бъдат именувани чрез добавяне на низ между квадратни скоби в декларациите за свойства, напр. мрежа-шаблон-редове: [1-ви] 1fr [втори ред] 1fr [последен] .

решетка 1-16 с 5-8 по-големи квадрата

Решетка с минимална и максимална височина, създадена с помощта на комбинация от px и fr единици и minmax () функция

Подобен на Flexbox , хоризонталното и вертикалното положение на елементите, поставени в мрежата, могат да се контролират чрез настройка оправдайте-елементи и align-items съответно до старт , център , край или опъвам, разтягам .

Същото е приложимо за мрежови колони и позиции на редове в по-голям контейнер с използване justify-content и align-content съответно. Валидните опции за тези свойства също включват пространство-между , където допълнително пространство е разделено между колони / редове, както и пространство наоколо и пространство-равномерно където пространството е разделено равномерно между колони / редове със съответно същото или половината от пространството в краищата. Ние също можем да определим align-content и justify-content (в този ред) използвайки място-съдържание , и align-items и оправдайте-елементи използвайки място-елементи .

Позициониране на елементи с помощта на номера на редове

За да поставим елемент в мрежата, можем да го зададем мрежа-колона-старт и мрежа-колона-край свойства към вертикалните номера на линиите, между които елементът трябва да бъде разтегнат. За редовете свойствата са grid-row-start и мрежа-ред-край - и разбира се цифрите се отнасят до хоризонталните линии.

решетка 1-16 с два елемента в нея

Елементите могат да се съдържат в една клетка на мрежата или да се разпънат в множество колони и решетки

Бихме могли да се възползваме и от стенографиите мрежа-колона и решетка , като ги зададете само на началната линия на мрежата, което кара елемента автоматично да се разтяга само до следващата линия на мрежата. Според изображението по-горе, използвайки тези методи, т. 1 може да се постави между вертикални линии 2 и 4 и хоризонтални линии 3 и -1 (последен ред или първи отдолу), и т.2 от вертикална линия 3 и хоризонтална линия 1 до следващите решетъчни линии с помощта на:

#item1 { grid-column-start: 2; grid-column-end: 4; grid-row-start: 3; grid-row-end: -1; } #item2 { grid-column: 3; grid-row: 1; }

За допълнително опростяване на декларациите grid-колона-старт: 2 и мрежа-колона-край: 4 могат да се комбинират заедно като мрежа-колона: 2/4 , със същото, приложимо за редове, използващи решетка .

какъв видео редактор използва pewdiepie

Предупреждението при използването на тези методи за поставяне е, че някои от декларациите са донякъде погрешни имена. Например, мрежа-колона-край: 4 и мрежа-колона: 2/4 може да се тълкува погрешно като значение „поставяне на краен елемент в колона 4“ и „поставяне на елемент в колони 2, 3 и 4“ съответно. Това разбира се не е така, тъй като числата представляват линиите на мрежата, а не колоните. За да избегнем тази потенциална ловушка, можем да декларираме номера на началната решетка и броя на колоните или редовете, които елементът трябва да обхваща, използвайки ключовата дума span.

елементи 1 и 2 в по-големи кутии в мрежата

Използвайте ключовата дума span, за да определите броя колони или редове, които искате да обхване елементът

Използвайки тези методи, можем да репозиционираме т. 1 между хоризонтални линии 2 и 4 и вертикални линии 1 и 2 и т. 2, започвайки от вертикална линия 2 и обхващаща три колони и от хоризонтална линия 3, обхващаща два реда (както е на изображението по-горе), като се използва:

#item1 { grid-column: 1; grid-row: 2 / 4; } #item2 { grid-column: 2 / span 3; grid-row: 3 / span 2; }

Вярвате или не, разположението на артикулите може да бъде опростено още повече със собствеността зона на мрежата , което е стенография за grid-row-start , мрежа-колона-старт , мрежа-ред-край и мрежа-колона-край в този ред. Ако са дефинирани само първите две свойства, елементът автоматично ще бъде поставен между тези редове и следващите.

Това свойство на мрежата също така позволява да се комбинират номера на редове с ключовата дума span. Прилагайки тези методи, можем да преместваме т. 1 и т.2 като такъв:

#item1 { grid-area: 2 / 1 / span 2 / span 3; } #item2 { grid-area: 4 / 4; }

Позициониране на елементи с използване на имена на области

Въпреки че се използват номера на решетка и обхват ключовата дума е чудесен начин за позициониране на елементи, има още по-интуитивен и лесен начин за поставяне на елементи в мрежата. Това включва използването на зона на мрежата и мрежови шаблони-области Имоти.

За да се постигне това, на всеки елемент, който трябва да се позиционира в мрежата, първо трябва да се даде име, като се зададе неговото зона на мрежата свойство към низ, който след това може да бъде включен в мрежата мрежови шаблони-области декларация. След това става възможно да се дефинира мрежови шаблони-области използване на визуална „карта“, в която редовете са затворени в кавички, като съдържанието на всяка клетка на мрежата е представено от низ, отнасящ се до зона на мрежата имена на предметите.

как да отмените избора на част от селекцията в

Празните клетки са символизирани с точка ( . ) и интервалите означават вертикални линии на мрежата. Редовете могат да бъдат поставени на нови линии, за да осигурят визуално представяне на мрежата, както следва:

#item1 { grid-area: item1; } #item2 { grid-area: item2; } .grid { grid-template-areas: '. . . .' '. . . item1' 'item2 item2 item2 item1' 'item2 item2 item2 .'; }

Как да създадете отзивчиво оформление с помощта на CSS Grid

CSS Grid може да се използва с медийни заявки за преструктуриране на елементи на различни размери на екрана, без промяна на маркирането. Формата, размерът и позицията на елемента могат да бъдат напълно променени, което води до наистина отзивчиво и силно персонализирано оформление.

списък на различни йерархии

Фигура 1

Да приемем, че имаме списък с елементи, генерирани от тази HTML маркировка (фигура 1):

оформление с различни елементи на различни места

Фигура 2

Използвайки наученото за Grid досега, можем да приложим стилове за екрани, които са по-широки от 720px, като използваме медийна заявка (фигура 2):

@media (min-width: 721px) { .header { grid-area: header; } .menu { grid-area: menu; } .hero { grid-area: hero; } .main { grid-area: main; } .banner { grid-area: banner; } .extra { grid-area: extra; } .image { grid-area: image; } .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 40px 2fr repeat(4, 1fr); grid-template-areas: 'header header header header' 'hero hero hero hero' 'menu main main main' 'menu main main main' 'menu banner banner banner' 'menu extra image image'; } }

различно оформление

Фигура 3

Също така можем лесно да преместваме и оразмеряваме елементите за по-големи екрани, които са по-широки от 1000px, като използваме друга медийна заявка (фигура 3):

@media (min-width: 1001px) { .grid { grid-template-areas: 'header menu menu menu' 'hero hero hero hero' 'hero hero hero hero' 'main main . image' 'main main . extra' 'banner banner banner banner'; } }

Това не е всичко - броят на колоните и редовете на мрежата може дори да бъде променен, за да се вземат предвид определени размери на екрана, ако това се желае, чрез предефиниране мрежа-шаблон-колони и / или мрежа-шаблон-редове в медийните заявки.

Припокриващи се елементи също могат да бъдат постигнати с помощта на CSS Grid. Множество елементи могат да заемат едни и същи клетки на мрежата и следователно могат да се припокриват един с друг, използвайки z-индекс свойства на елементите, за да контролират реда, в който се подреждат.

различно оформление, с лента с инструменти вдясно

Фигура 4

Например, можем да добавим полупрозрачен елемент с лентата с инструменти на класа в контейнера на мрежата и да го позиционираме в най-дясната колона, така че да се припокрива с всички останали елементи (фигура 4):

флип телефони, които се връщат със стил
.toolbar { grid-column: 4; grid-row: 1 / -1; opacity: .85; z-index: 1; }

различно уеб оформление

Фигура 5

Последният аспект, който ще обсъдим, е разстоянието между колони и редове или пропуски (фигура 5). Елементите в мрежата могат да бъдат разделени с помощта на решетка-колона-празнина или решетка между редове свойства, които задават размера на разликата между колоните и редовете съответно. Стенографската разлика в мрежата може да зададе и двете.

CSS Grid резервни копия за по-стари браузъри

Поставянето на свойствата на CSS Grid под мобилните свойства гарантира, че браузърите, които все още не поддържат Grid, ще го игнорират и ще изобразят мобилната версия. Като алтернатива можем да добавим основно резервно оформление с помощта на @поддържа , заявка, която прилага правила, базирани на поддръжката на браузъра за конкретна функция на CSS. По този начин можем да зададем резервно оформление за размери на екрана по-широки от 720px:

@supports not (display: grid) { @media (min-width: 721px) { .header, .extra { float: left; width: 50%; } } }

Ако по някаква причина имате нужда този резервен вариант да бъде показан за Internet Explorer 10 и 11, които не поддържат Grid, нито по ирония на съдбата @поддържа заявка, можете да използвате добре позната заявка, която прилага стилове само в IE10 и 11:

@media (min-width: 721px) and (-ms-high-contrast: none), (-ms-high-contrast: active) { .header, .extra { float: left; width: 50%; } }

Ако се нуждаете от поддръжка на IE9 и по-стари, заредете допълнителен лист със стилове в HTML със съответните стилове, като използвате:

CSS Grid ресурси

За повече информация и уроци по CSS Grid Module разгледайте следните ресурси.

MDN уеб документи
Както винаги, сайтът за уеб документи Mozilla Developer Network е чудесно място да започнете - или непрекъснато да се връщате в зависимост от това колко силна е вашата памет - за ресурси за уеб разработчици. Страницата му с CSS Grid оформление има обяснения за всички свойства на Grid, както и интерактивни примери, които можете да опитате.

Scrimba интерактивен: Урок за CSS Grid
Scrimba е платформа за интерактивни кодови курсове. Можете да поставите видеоклиповете на пауза, да редактирате кода в тях и да видите резултатите, преди да възобновите урока. Това е фантастичен начин да научите кодиране и безплатният 14-частен CSS Grid курс на Per Harald Borgen е чудесен за тези, които предпочитат видео уроци.

Игра Grid Garden
Чудесен интерактивен начин за учене на кодиране е чрез игрите. Grid Garden е онлайн игра, която ви напоява градина от моркови, като въведете CSS Grid свойства в редактор. Много е забавно и изненадващо удовлетворяващо, дори ако реколтата ви е само цифрова.

Проектиране на сайт като част от екип? Вашият съхранение в облака услуга ще помогне на всички да останат на една и съща страница.

Тази статия първоначално е публикувана в нето , най-продаваното списание в света за уеб дизайнери и разработчици. Купува брой 309 или Абонирай се .

Прочетете още: