Научете CSS Grid за 5 минути - Урок за начинаещи

Оформлението на мрежата е от основно значение за дизайна на уебсайтове, а модулът CSS Grid е най-мощният и лесен инструмент за създаването му. Аз лично мисля, че е много по-добър, отколкото например Bootstrap (прочетете защо тук).

Модулът също така получи родна поддръжка от основните браузъри (Safari, Chrome, Firefox, Edge), така че вярвам, че всички разработчици от предния край ще трябва да научат тази технология в не толкова далечното бъдеще.

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

Създал съм и безплатен CSS Grid курс. Щракнете тук, за да получите пълен достъп до

то.

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

Сега нека скочим в него!

Първото ви оформление на мрежата

Двете основни съставки на CSS Grid са обвивката (родител) и

предмети (деца). Опаковката е действителната мрежа, а елементите са съдържанието в мрежата.

Ето маркировката за обвивка с шест елемента в нея:

 1 2 3 4 5 6 

За да превърнем нашата обвивка divв мрежа , ние просто я показваме на

grid:

Но това все още не прави нищо, тъй като не сме определили как искаме да изглежда нашата мрежа. Той просто ще подрежда 6 един div'sвърху друг.

Добавих малко стил, но това няма нищо общо с CSS мрежата.

Колони и редове

За да го направим двуизмерен, ще трябва да дефинираме колоните и редовете. Нека създадем три колони и два реда. Ще използваме grid-template-rowи grid-template-columnсвойства.

Тъй като сме написали три стойности grid-template-columns, ще получим три колони. Ще получим два реда, тъй като сме посочили две стойности за grid-template-rows.

Стойностите диктуват колко широки искаме да бъдат нашите колони (100px) и колко високи бихме искали нашите редове да бъдат (50px). Ето резултата:

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

.wrapper { display: grid; grid-template-columns: 200px 50px 100px; grid-template-rows: 50px 50px; } 

Опитайте се да разберете връзката между кода и оформлението.

Ето как се играе:

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

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

Нека създадем мрежа 3x3, като използваме същата маркировка като преди.

.wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } 

Това ще доведе до следното оформление:

Забележете, на страницата виждаме само мрежа 3x2, докато я дефинирахме като мрежа 3x3. Това е така, защото имаме само шест елемента, с които да запълним мрежата. Ако имахме още три, тогава ще се запълни и най-ниският ред.

За да промените размера и позицията на елементите, ние ще ги насочите и използвате grid-columnи grid-rowсвойства:

.item1 { grid-column-start: 1; grid-column-end: 4; } 

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

Ето как ще се играе на екрана:

Объркани ли сте защо имаме 4 реда колони, когато имаме само 3 колони? Погледнете това изображение, където съм начертал линиите на колоните в черно:

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

И накрая, бих искал да покажа по-прост начин за писане на синтаксиса по-горе:

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

.item1 { grid-column-start: 1; grid-column-end: 3; } .item3 { grid-row-start: 2; grid-row-end: 4; } .item4 { grid-column-start: 2; grid-column-end: 4; } 

Ето как изглежда това на страницата. Опитайте се да увиете главата си, защо изглежда така. Не трябва да е твърде трудно.

И това беше!

Благодаря за четенето! Казвам се Per Borgen, аз съм съосновател на Scrimba - най-лесният начин да се науча да кодирам. Трябва да проверите нашия отзивчив уебкамп за уеб дизайн, ако искате да се научите да изграждате модерен уебсайт на професионално ниво.