11 неща, които научих, четейки спецификацията на CSS Grid

Илюстрация от Алекс Кунчевски

11 юни 2017 г. реших да прочета спецификацията на CSS Grid.

Spec беше малко техничен, но беше най-приятната спецификация, която някога съм чел. Ако сте по-напреднал разработчик, отметнете го за бъдещи справки.

Така че, това ще е полезно?

Вярвам, че разликата между добри и страхотни инженери е, че последните отделят време, за да разберат какво наистина се случва под капака. Те научават как работят нещата, вместо да учат чрез „копиране и поставяне“.

И така, искате ли да бъдете страхотен разработчик?

О, да. Или не бихте чели тази статия.

Какво ще научите

Докато четях спецификацията, научих някои много фини, но дълбоки подробности.

В тази статия ще ги споделя с вас.

1. CSS Grid е декларативен

Декларативните API са толкова сладки за работа. Мислите ReactJS?

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

Точно това е проблемът, който CSS Grid е решил днес.

От спец.

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

Това са добри времена в историята на CSS.

2. Фракционната единица не винаги създава еднакво разположени редове и колони

Едно от първите неща, които всички научават и обичат за CSS Grid, е фракционната единица. Дори патица може да се размине с нея.

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

Повечето хора учат, че дробната единица (fr) дава еднакво разположени колони или редове.

Например, декларация като 1fr 1fr 1fr се очаква да ви даде колони или редове с еднакво разстояние. Вижте илюстрацията по-долу:

Равно разположени колони, създадени от дробовата единица.

За съжаление, това НЕ винаги е вярно. Лоша патица.

Следното е от спецификацията:

Fr единицата попълва наличното пространство, но НИКОГА не е по-малка от минималния размер на контейнера за решетка или съдържанието на реда или колоната.

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

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

3. Всъщност не знаете как размерите на решетките Или, нали?

Дефиницията на CSS мрежа винаги започва в редовете на това:

дисплей: решетка

Често пъти той е последван от дефинициите на реда и колоните. Нещо като това:

решетка-шаблон-редове: 10px 1fr 3fr
решетка-шаблон-колони: 1fr

И накрая, има вероятност да поставите елементите на решетката с каквато техника ви подхожда.

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

И така, ето проблема.

Под капака трябва да приемете, че размерът на редовете и колоните на мрежата първо се изчислява преди поставянето на елементите. Така ли е?

Е, изглежда, че истината е пълната противоположност.

Колко странно.

Следното е от спецификацията:

2.3. Оразмеряване на решетката
След като елементите на мрежата са поставени, се изчисляват размерите на мрежовите песни (редове и колони), като се отчитат размерите на тяхното съдържание и / или наличното пространство, както е посочено в дефиницията на мрежата.

Отбележете прогресията.

  1. Поставят се елементите на решетката.
  2. Размерите на решетките се изчисляват

Има вероятност да имате въпроси около това. Така че ще се опитам да реша вашите проблеми.

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

Ако погледнете раздела „Поставяне на Grid items“ в спецификацията, ще намерите акъл.

Много се взема предвид при оразмеряването на решетките и това до голяма степен включва размера на елементите на мрежата.

Оразмеряването на решетките може да се основава на следното:

  • Фиксирана функция за оразмеряване (дължина или разрешим процент).
  • Вградена функция за оразмеряване (min-content, max-content, auto, fit-content ()) или
  • Гъвкава функция за оразмеряване (flex).

Това, което вярвам, че се случва под капака, е, че са поставени елементите на решетката.

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

Ще видиш?

Не това, което първоначално сте мислили.

4. По подразбиране елементите на мрежата се разтягат, за да пасват на тяхната област на мрежата - освен в определени случаи

Без вашата намеса, мрежовите елементи винаги ще се разтягат, за да пасват на тяхната област на мрежата.

Така че, ако имате декларация така:

grid-template-области: „заглавна глава на заглавката“
                     „странична лента основна основна“
                     „долен колонтитул на страничната лента“

И имахте divs, присвоени на специфичните области на мрежата, така:

.div1 {
   grid-area: хедър
}
.div2 {
   решетка: странична лента
}
.div3 {
   площ на решетката: основна
}
.div4 {
   grid-area: футър
}

Не е необходимо да декларирате ширината и височината на divs горе на 100%

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

Сега ето уловката.

Това поведение е несъвместимо с Изображенията.

Както посочи Рейчъл Андрю, спецификацията продължава да казва, че това поведение е различно за елементите от мрежата с присъщо съотношение на страните.

Не позволявайте на големите думи да ви плашат. Това не е демогоргон.

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

Но обикновените блокови елементи като divs нямат присъщи измерения. Тоест, те нямат измерения, които естествено им принадлежат.

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

5. Наистина ли знаете какво е Grid Item?

Помислете кодовия блок по-долу:

    
блок     
поплавък         Аз съм случаен текст     <Педя>         т. 4     

В блока с кодове по-горе можете ли да забележите елементите на мрежата?

Колко елементи на мрежата са в кодовия блок, 3 или 4?

Провалих този въпрос грубо.

Обърнете внимание, че текстът, който съм случаен текст, не е обвит от HTML маркери.

кой е?

И така, какъв е отговорът ви?

Е, ако сте отговорили на 3, грешите. Хаха, имам!

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

Да, това означава, че съм случаен текст също е елемент от мрежата.

блок     
поплавък
    
    Аз съм случаен текст

    <Педя>
        т. 4
    

Да, отговорът е 4. Имаме 3 изрични мрежови елемента и 1 анонимен елемент от мрежата!

Разбра ли?

6. Полетата на съседни елементи от мрежата не се сриват.

Има големи разлики между блоковите елементи и контейнерите на мрежата.

Искам да кажа, че елемент с дисплей: блок и друг с дисплей: решетка имат много основни разлики.

Разликата, която избирам да обсъдя тук, е свързана с сгъваемите маржове.

Едно от първите неща, които научавате с CSS, е концепцията за сгъваеми маржове. Не искам да прекарвам много време в обяснение какво означават сгъваемите маржове. Ако го изкажете в коментарите, ще го направя.

И така, обратно към решетките.

При всеки елемент на решетката маржовете никога не се свиват.

Е, това е разбираемо. Нека ви покажа защо.

Съседни мрежови елементи се съдържат независимо от съдържащия се блок, образуван от техните мрежови области.

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

Елементите на мрежата се поставят в съответните области на мрежата. Те остават на собствените си необезпокоявани територии. Те не са засегнати от сгъваеми маржове. Колко яко.

Технически може да се каже, че елементът на мрежата не е непосредствен съсед на останалите елементи на мрежата. Но се съдържа в непрекъсната затворена територия - зоната на мрежата.

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

7. автоматично попълване и автоматично напасване. Каква е разликата?

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

Те са сходни по смисъл, че позволяват автоматично създаване на мрежови песни, които по някакъв начин запълват контейнера на мрежата.

Например, следният код ще създаде толкова колони от 200 пиксела, колкото ще се поберат в ширината на прозореца. Ако има останало място, то ще бъде разпределено между колоните с 200 пиксела.

тяло {
  дисплей: решетка;
  grid-template-колони: повторете (автоматично запълване, minmax (200px, 1fr));
}

Каква е разликата?

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

Това е всичко.

8. В дефиницията на областите на решетка-шаблон, броят на думите в низ трябва да е равен.

Спомняте ли си странните изглеждащи стойности на областите на решетка-шаблон, които приличат на карта?

Е, изглежда, може бързо да обърка нещата.

В декларация за области с решетка-шаблон, всички низове трябва да имат еднакъв брой колони, иначе декларацията е невалидна.

Например:

/ * това е валидно * /
grid-template-areas: "странична лента на заглавката на заглавката на заглавието"
                     "основна основна главна лента"
                     "основна основна главна лента"
/* това е грешно */
grid-template-areas: "странична лента на заглавката на заглавката на заглавието"
                     "основна основна главна лента"
                     "основна основна странична лента"

Броят на думите в низовете трябва да е равен.

9. Избягвайте използването на проценти в подплънки или маржове върху елементите на мрежата изцяло

От спецификацията на CSS Grid

Причината за това е проста. По време на това писане ще получите различно поведение в различни браузъри.

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

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

По-важното е, че вече има няколко объркващи бита с CSS Grid. Не се стреляйте в крака с проценти подплънки или полета в елементите на решетката.

10. Как се решава размерът на изричната мрежа, когато има конфликт?

Да приемем, че имате решетка за решетка така:

grid-template-areas: "странична лента на заглавката на заглавката на заглавието"
                     "основна основна главна лента"
                     "основна основна главна лента"

В блока с кодове по-горе имате 4 колони и 3 реда.

Ами ако и вие сте направили това:

grid-template-колони: повторете (5, 1fr)
решетка-шаблон-редове: повторете (4, 1fr)

Сега имате още колони и редове. 5 колони и 4 реда.

Имаш го?

Вече има конфликт в декларациите. И така, как се решава това?

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

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

В горния пример решетката ще заеме 5 колони и 4 реда НЕ 4 колони и 3 реда.

* EDIT: Свойството-области-grid-template-области се използва за поставяне на мрежови елементи в мрежа. И така, защо трябва да имаме конфликт в дефиницията на мрежата? Няма ли решетките да се дефинират само със свойствата на решетка-шаблон-колони и редове-шаблон-редове-редове? Отговарям на това в секцията за коментари. Виж това.

11. Размерът на решетката не е чисто сумата на размерите на пистата

Решетките в мрежата се отнасят за разстоянието между линиите на мрежата.

Въпреки че това е просто, струва си да се спомене, ако имате настроена мрежа с фиксирана ширина.

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

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

БОНУС: Всички можем да допринесем за подобряването на DOCS

Тъй като съм добра душа, добавих още един съвет тук

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

Докато четях спецификацията, забелязах една мъничка печатна грешка.

По това време не бях особено сигурен какво да правя. И така, попитах в Twitter.

Видът, който Джен Симънс помогна да подаде проблем на github, и той се оправи.

И така, какъв е моралът?

Можете да помогнете за подобряването на документите, като допринасяте по какъвто и да е начин.

Да ти!

Нека заедно да подобрим мрежата.

Искате ли да станете професионалист?

Изтеглете безплатното ми ръководство за CSS Grid, а също и безплатно вземете два качествени интерактивни курса Flexbox!

Как да овладеете CSS Grid и какво да изградите по пътя (Безплатен PDF Guide)

Вземете ги сега