Разкрити са тайните на CSS Grid Layout

CSS Grid Layout стартира в браузърите през март 2017 г. и по време на писането на над 70 процента от посетителите на повечето сайтове ще имат Поддръжка на мрежата . Тази цифра бързо нараства и се подобрява, тъй като Edge изпраща актуализираната си поддръжка.

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



01. Функцията minmax ()

За разлика от другите методи за оформление, където трябва да зададем оразмеряване на самия елемент, в Grid Layout задаваме оразмеряване на ниво контейнер. Определяме песни, които създават решетъчни клетки, в които може да се постави съдържание.



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

В примера по-долу имам спретнат панел с надпис в горния ляв ъгъл и голямо изображение отдясно. Искам горният ред да е минимум 150 пиксела висок, без значение колко реда може да се нуждае от заглавието или друго съдържание.



Ако обаче има повече редове със съдържание или размерът на текста е по-голям, искам това поле да нараства по-голямо от 150 пиксела. Тук използвам minmax () , задавайки минимален размер от 150 пиксела и максимум автоматично.

.grid { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: minmax(150px, auto) minmax(300px,auto); }

Чрез задаване на минимална височина на ред, ние създаваме редове с чист размер в нашия дизайн, дори с по-кратко съдържание

Чрез задаване на минимална височина на ред, ние създаваме редове с чист размер в нашия дизайн, дори с по-кратко съдържание

Функцията minmax () с максимум автоматично означава, че съдържанието не прелива, ако има повече от очакваното



Функцията minmax () с максимум автоматично означава, че съдържанието не прелива, ако има повече от очакваното

Като се използва minmax () , ако просто имаме заглавието в това поле, полето е по-високо от необходимото пространство. Ако имаме по-дълго заглавие и допълнителен текст, той се разширява, за да освободи място.

02. Автоматично попълване и автоматично напасване

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

За да имате толкова 200 пикселни колони, колкото ще се побере в контейнер, използвайте списък с песни на:

.grid1 { display: grid; grid-template-columns: repeat(auto-fill, 200px); }

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

.grid1 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, auto)); }

Това изображение демонстрира разликата между автоматично попълване с колони с фиксиран размер и автоматично попълване с помощта на minmax () за създаване на гъвкаво оразмерени колони

Това изображение показва разликата между автоматично попълване с колони с фиксиран размер и автоматично попълване използвайки minmax () за създаване на гъвкаво оразмерени колони

Използвах автоматично попълване ключова дума тук; това ще запази място за записи, дори ако няма съдържание за тях. Ако вместо това използвате автоматично прилягане , всички напълно празни песни ще бъдат свити и тяхното пространство ще бъде разпределено на останалите песни.

03. Режим на плътно опаковане

Когато декларирате дисплей: мрежа на даден елемент, всички директни деца стават елементи на мрежата и елементите ще започнат автоматично да се поставят върху тази мрежа. Това се случва въз основа на правилата за автоматично поставяне, които са дефинирани в спецификацията.

Ако някои от вашите елементи обхващат песни и това означава, че има елементи, които няма да се поберат в налична песен, те ще създадат нов ред в мрежата. По подразбиране мрежата напредва напред и показва вашите елементи в реда, в който се появяват в източника.

Ако обаче зададете стойността на мрежа-автоматичен поток да се плътен , Grid ще започне да се връща назад, след като напусне тези пропуски. Ако намери предмет, който ще се побере във вече оставена празнина, той ще го вземе и ще го постави извън реда на изход, в процепа.

.grid { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(auto-fill,minmax(200px, 1fr)); }

Правилата за автоматично поставяне ще запазят елементите на мрежата в изходен ред по подразбиране; това може да доведе до пропуски в оформлението

Правилата за автоматично поставяне ще запазят елементите на мрежата в изходен ред по подразбиране; това може да доведе до пропуски в оформлението

Използване на автоматичен поток на мрежата със стойност на плътни завои в режима на плътно опаковане, което може да запълни празнините в оформлението

Използване на автоматичен поток на мрежата със стойност на плътни завои в режима на плътно опаковане, което може да запълни празнините в оформлението

Това поведение е полезно, ако елементите, които показвате, нямат логичен ред, но лесно можете да направите оформлението много трудно за някой, който навигира с помощта на клавиатурата, ако той прави табулации от елемент на елемент. Използвайте тази функция с голямо внимание и тестване!

04. Магически линии и магически области

Когато използвате метода на Grid Template Areas за излагане на съдържание, създавате имена на вашата мрежа. Това от своя страна създава набор от именувани редове за редове и колони, които използват името на областта с -старт и -край приложена. В този следващ пример използвах посочените редове, създадени чрез позициониране на моите мрежови области, за да позиционирам наслагване.

.grid { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-auto-rows: minmax(100px, auto); grid-template-areas: 'sd1 content sd2' 'sd1 footer sd2'; } .side1 { grid-area: sd1; } .side2 { grid-area: sd2; } .content { grid-area: content; } .footer { grid-area: footer; } .grid .overlay { grid-column: sd1-start / sd2-end; grid-row: content-start / footer-end; }

Това работи в обратен ред, когато използвате имена на решетката. Ако назовете редове, завършващи с -старт и -край за колони и редове ще създадете имена на основното използвано име.

Област, дефинирана от линиите съдържание-старт и съдържание-край за редове и колони, ще има името съдържание. Можете да поставите елемент в тази област с grid-area: съдържание .

Наслагването е позиционирано в горната част на мрежовите области с помощта на имена на линии, създадени от името на областта

Наслагването е позиционирано в горната част на мрежовите области с помощта на имена на линии, създадени от името на областта

05. Подравняване по подразбиране

Когато елементът се превърне в елемент на мрежата, поведението по подразбиране е да се простира върху неговата област на мрежата; това е, освен ако елементът не е нещо с присъщо съотношение на страните. Ако елементът има съотношение на страните, той ще се подравни към началния ред както в посоката на реда, така и в колоната. Това означава, че Grid няма да разтяга изображенията ви пропорционално по подразбиране, въпреки че разбира се можете да го направите, ако искате, като промените поведението на подравняването.

06. Отстъпки

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

Накратко, когато елемент се превърне в мрежа, ще намерите:

как да преоразмерите платното в
  • Ако е плаващ или използва свойството clear, тези свойства ще престанат да засягат елемента.
  • Ако има дисплей: вграден блок или използва свойство на таблица като дисплей: таблица-клетка те вече не се прилагат.
  • В случай на свойства на таблица, анонимни полета, които се генерират при използване дисплей: таблица-клетка без родителска таблица вече не се създават.
  • вертикално подравняване вече не се прилага.

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

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

С мрежата, ние поставяме елемента в мрежа мрежа, която го ограничава. Това означава, че ако имате елемент с зададена процентна ширина, тази ширина ще се превърне в процент от площта на мрежата, след като елементът стане елемент на мрежата.

Решението за това е друга CSS спецификация: Feature Queries. Можем да използваме Feature Query, за да тестваме за поддръжка на Grid Layout. Ако браузърът поддържа Grid, задавам ширината на auto.

.grid > div { float: left; width: 33.333%; } @supports (display: grid) { .grid > div { width: auto; } }

07. Оразмеряване с минимално съдържание и максимално съдържание

Спецификацията на модула за вътрешно и външно оразмеряване на CSS на ниво 3 определя допълнителни ключови думи за оразмеряване. Тези ключови думи включват мин-съдържание и max-съдържание , който може да се използва за определяне на размера във вашите решетъчни следи.

Като много прост пример създадох решетка с две колони. Една колона се определя като мин-съдържание размер, втората колона max-съдържание . Първият запис е толкова голям, колкото е необходимо за показване на една дума от съдържанието - това е минималният размер, който може да бъде този запис. Вторият се разширява, за да позволи на целия ред да се покаже, което може да откриете като причина за препълвания, които трябва да управлявате и да се справите.

.grid { display: grid; grid-template-columns: min-content max-content; }

Колоната с минимално съдържание е толкова широка, колкото е необходимо за показване на една дума; колоната max-content се разширява, за да се побере в изречението

The мин-съдържание колоната е толкова широка, колкото е необходимо за показване на една дума; на max-съдържание колоната се разширява, за да побере изречението

Характеристики от ниво 2

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

Нещата все още се случват за Grid, а в останалата част на тази статия ще разгледаме скорошна промяна в спецификацията на ниво 1 и няколко неща, които може да се наложи да очакваме с нетърпение в ниво 2.

08. Пропуските се променят

The решетка стенография, плюс стенограмата мрежа-колона-празнина и решетка между редове свойствата бяха променени по време на заседанието на работната група на CSS от август 2017 г., за да станат празнина , колонна пролука и редица . Те също са преместени, за да имат своите дефиниции в спецификацията за подравняване на полето.

Това е спецификацията, която взе хубавите функции за подравняване от Flexbox и ги разшири, за да могат да се използват и в Grid - и потенциално други методи за оформление също.

Поставянето на функциите на празнината в спецификацията за подравняване на полето и именуването им по по-общ начин означава, че те могат да се използват в други типове оформление, където имат смисъл. Очевидното място, където имат смисъл, е във Flexbox.

Това преименуване означава, че в крайна сметка ще получим подходящи пропуски във Flexbox; няма повече бъркотия с маржовете. Браузърите ще псевдоним на старите имена на новите, така че ако вече сте използвали пропуски в Grid Layout, този код няма да се счупи. Въпреки това може да искате да добавите и двете свойства сами; браузърите игнорират този, който не поддържат.

09. Решетката не е масонство

Когато хората за пръв път видят режима на плътно опаковане, който демонстрирах по-рано в тази статия, те често мислят, че Grid може да направи шаблона за оформление на зидарията. Зидарията обаче е съвсем различен тип оформление. Стандартното оформление на Masonry не е строга мрежа, което прави този модел да седи някъде между това, в което Flexbox е добър и това, което Grid прави.

В работната група по CSS обаче обмисляме този въпрос. Това е нещо, което знаем, че разработчиците наистина искат да могат да направят. Можете да намерите дискусията в CSS WG чернови хранилище на GitHub и дори добавете мислите си също.

10. Псевдоелементи на Grid Area

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

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

Тази статия първоначално се появи в брой 298 от нетно списание , списанието за професионални уеб дизайнери и разработчици - предлага най-новите нови уеб тенденции, технологии и техники. Купете брой 298 тук или абонирайте се за net тук .

Хареса ли ви това? Прочетете тези!