Ръководство за начинаещи за CSS Grid

Снимка на Грег Ракози на Unsplash

За първи път чух за CSS Grid към края на 2016 г. Седях на една от първите ми срещи на Tech Ladies® и един участник спомена, че чува колко е невероятно. Бързо напред и половина по-късно и най-накрая копая по-дълбоко в Grid. Като отдаден потребител на Flexbox, вече мога да кажа как това ще бъде смяна на игри.

Най-големият въпрос, който имах, когато започнах да научавам за CSS Grid, беше: как Grid е различен от Flexbox? И разбрах, че като цяло Grid може да направи всичко, което Flexbox може да направи. Някои хора смятат, че Grid е за многоизмерни оформления, докато Flexbox трябва да се използва за едномерни оформления. Но Grid е чудесен и при едноизмерни оформления - особено ако се върнете по-късно и решите, че искате да направите това оформление многоизмерно.

Настройка на CSS Grid

Grid е изключително лесна за настройка - всичко, което е необходимо, е две линии на CSS.

HTML

  
1
  
2
  
3
  
4
  
5
  
6

CSS

.wrapper {
    дисплей: решетка;
    решетка-шаблон-колони: 10rem 10rem 10rem;
}

И воала! Имате решетка. Сериозно, това е всичко, което ви трябва. Доста е страхотно.

Ще забележите, че за разлика от настройването на Flexbox да се показва: гъвкаво, добавяне на дисплей: решетка към вашата обвивка не прави веднага промяна. Това е така, защото не определяте изрично колко колони искате да има вашата мрежа. Ще направите това с колони с решетка-шаблон, както направих по-горе. Така че в този пример задавам три колони с ширина 10rem всяка.

Основна CSS мрежа

Можете да използвате каквато и да е стойност, която желаете, когато задавате колони за решетка-шаблон, но аз предлагам да се държите далеч от процентите, освен ако не се опитвате да добавите до 100%. Това е така, защото ще трябва да вземете предвид размера на разликата в мрежата (в която ще се потопим малко) и това може да стане малко сложно.

Изрично срещу неявни песни

Преди да говоря за явни и неявни песни, нека първо да поговорим за това какви са песни. Следите са как колоните и редовете са номерирани. Вместо да броите отделните колони и редове сами, в CSS Grid ги броите по линиите на песен. Ето решението, с което започнахме - преброих всички редове и колони на песни, за да ви е малко по-лесно.

CSS Grid с колони и редове, номерирани с редове

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

Бърза забележка: ако използвате разработчика на Firefox за разработчици (бета версията на обикновения Firefox), той всъщност има някои страхотни инструменти за разработка, за да видите номерата на колоните и редовете. Ако инспектирате елемента на обвивката си и след това отидете на раздела за оформление, поставете отметка в квадратчето за вашата обвивка и сега вашата мрежа ще изглежда по-долу! Наистина се надявам Chrome да добави подобна функция за проверка в бъдеще. Това е изключително полезно

Инструменти за инспектори на Firefox Developer Edition

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

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

Добавяне на Grid-Gap

Помислете за разликата в мрежата като марж, с изключение на това, че тя ще се добавя само между елементи, а не към външната страна на мрежата. Сблъсквам се с толкова много случаи, когато добавям марж за елементи от мрежата на Flexbox, само за да трябва да отида в обвивката на мрежата и да задам същото количество марж, но отрицателен, за да компенсирам границата, която се задава извън мрежата. За щастие с CSS Grid, не е нужно да се справяте с това.

Нека вземем нашия пример CSS по-горе и добавете малко празно пространство.

.wrapper {
  дисплей: решетка;
  решетка-шаблон-колони: 10rem 10rem 10rem;
  решетка-пролука: 1rem;
}
CSS Grid с 1rem решетка

Използвах собствеността на стенограмата grid-gap, но можете да определите изрична стойност за колоните и редовете, като използвате grid-column-gap и grid-row-gap.

* Забележка: Chrome 66 ще промени променливата решетка към празнина и решетка-колона-пропаст / решетка-ред-пропаст към колона-пропаст / ред-празнина.

Функцията Repeat ()

Определянето колко широка искате да бъде всяка от вашите колони, когато използвате решетка-шаблон-колони с три колони, които са с еднаква ширина, е доста просто. Но това е много да пишете, ако искате повече колони от това. Тук идва функцията repe ().

Ето нашия пример, който използваме с добавената функция повторение ().

.wrapper {
  дисплей: решетка;
  решетка-шаблон-колони: повторете (3, 10rem);
  решетка-пролука: 1rem;
}

Както можете да видите в моя CSS, задавам три колони, всяка да бъде широка 10 рамки. Тази решетка ще изглежда точно като решетката, изобразена в примера ни за решетка. Използвайки функцията повторение (), ние просто правим писането на неща по-просто и лесно за четене, когато искате да зададете много колони.

Дробни единици

Дробните единици, или fr, са нова единица за дължина на CSS, въведена с CSS Grid и такава, която мога да видя, използвайки през цялото време. Кажете, че искаме три колони, всички с еднаква ширина. Вместо да задаваме ширина: calc (100% / 3) на елементите, можем да използваме дробни единици. Помислете за дробните единици като за „свободно пространство“.

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

.wrapper {
  дисплей: решетка;
  решетка-шаблон-колони: 1fr 1fr 1fr;
  решетка-пролука: 1rem;
}

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

CSS Grid с помощта на дробни единици

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

Не е нужно да задавате и всичките си колони като 1fr. По-долу е пример, когато зададох първата и третата си колона на 10 секунди, докато средната ми колона е 1fr. Можете също да зададете колоните си на 2fr, 3fr и т.н., и елементите на тази колона ще заемат 2х, 3x (и така нататък) количеството пространство.

CSS Grid със само средната колона, зададена на 1fr

Оразмеряване на отделни елементи на мрежата

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

.wrapper {
  дисплей: решетка;
  решетка-шаблон-колони: повторете (3, 10rem);
  решетка-пролука: 1rem;
}
.item5 {
  решетка-колона: обхват 2;
}

Ще видите по-горе, че задаваме решетъчната колона на елемент пет да бъде диапазон от две, което ще позволи на елемент пет да обхване ширина от две колони.

CSS Grid с обхват на отделен елемент

Но какво ще стане, ако искате елемент пет да обхваща три колони? Това ще се случи.

CSS Grid обхващащ елемент пет в три колони

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

Има доста просто решение за фиксиране на празното пространство, което се намира от точка пета, движеща се надолу по ред. Може да се използва независимо дали задавате елемент, за да обхване ред или колона - решетка с автоматичен поток: плътна.

.wrapper {
  дисплей: решетка;
  решетка-шаблон-колони: повторете (3, 10rem);
  решетка-пролука: 1rem;
  решетка-автоматичен поток: плътен;
}
.item5 {
  решетка-колона: обхват 3;
}

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

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

CSS Grid с решетка с автоматичен поток: плътен

Свойството с автоматично протичане на решетка само по себе си определя в каква посока трябва да добавите друг ред или колона, след като вече сте дефинирали вашите елементи. Row е по подразбиране. Не виждам голям случай за това, освен да използвам решетка с автоматичен поток: плътна.

Поставяне на Grid елементи

В нашия пример с оразмеряването на отделни елементи на решетката първоначално задавахме елемент пет на решетка-колона: span 2, което позволява на елемент пет да се простира в две колони. Всъщност решетката-колона е стенограма за решетка-колона-старт и решетка-колона-край. Същото важи и за редовете с решетка.

Така че, технически, ние задавахме точка пет да бъде решетка-колона-старт: span 2и grid-колона-end: auto. По същество ние казвахме на мрежата да започне елемент пет там, където естествено би, но отидете два пъти по-голям от размера.

Нека отново работим с точка пет и аз ще ви покажа това с помощта на инструментите за инспектори на Firefox Developer Edition, така че да ви е по-лесно да видите на каква позиция е петата позиция на песен. Добавих и още няколко елемента от мрежата.

.wrapper {
  дисплей: решетка;
  решетка-шаблон-колони: повторете (3, 10rem);
  решетка-пролука: 1rem;
}
.item5 {
  решетка-колона-старт: 1;
  решетка-колона-край: 3;
}

CSS Grid ще подреди всички елементи преди петия ни, ще спре и след това ще разгледа откъде сме започнали и завършили елемент пет и ще го постави там, където му казахме. Стенограмата на това ще бъде колона с решетка: 1/3, където 1 е началната ни стойност, а 3 е крайната ни стойност.

CSS Grid с помощта на grid-column-start и grid-column-end

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

.wrapper {
  дисплей: решетка;
  решетка-шаблон-колони: повторете (3, 10rem);
  решетка-пролука: 1rem;
}
.item5 {
  решетка-колона: обхват 2/4;
}
CSS Grid със свойство за стенограма на колона с решетка

Ако искате вашият артикул да обхване цялата ширина на мрежата, но не знаете колко широка е вашата мрежа, можете да зададете решетка-колона: 1 / -1. По принцип тази стойност -1 указва на вашия артикул да премине до последния запис. Ако направите това с редове, ще забележите, че вашият артикул може да не стигне до края на мрежата. Той ще отиде само в долната част на изричните ви редове, а не на техните неявни редове.

ресурси

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

  • CSS Grid Tutorial на Wes Bos - той е напълно безплатен и е мястото, където научих за мрежата. Обичам неговия стил на преподаване!
  • Пълно ръководство за CSS трикове за CSS Grid - това има няколко страхотни мамят листа, когато сте останали в определен аспект на Grid.
  • CSS Grid Garden - забавен начин да практикувате наученото за CSS Grid. Препоръчвам да направите урок, преди да опитате това, тъй като понякога става малко объркващо.

Благодаря, че прочетох моя урок за CSS Grid! Вижте и другите ми статии като Как да отговоря на ужасения въпрос на интервю „Кажи ми за себе си“, „Защо трябва да наемеш Bootcamp Grad или моята история за това как станах разработчик.

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