5 минути с CSS Grid

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

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

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

Нашият първи CSS Grid макет

Двата основни компонента на CSS Grid са обвивката (Родителят) и елементите (Децата). Обвивката е всъщност решетка или таблица, а нейните елементи са данните в нея.

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

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

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

.wrapper {
    display: grid;
}

Засега този код нищо особено не прави, понеже не сме определили как точно трябва да изглежда тази решетка. Засега това са просто 6 div елемента един върху друг:

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

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

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

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

Зададените числа определят ширината на нашите колони (100px) и височината на нашите редове (50px). Ето какъв е резултатът:

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

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

Опитайте се да направите връзката между кода и получения макет (шаблон).

Ето как всъщност изглежда това:

Разположение на елементите

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

Нека да направим решетка с размерност 3х3, като използваме почти същия код, както направихме малко по-горе:

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

Това ще доведе до създаването на следния шаблон:

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

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

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

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

Може би ще се запитате, откъде се взе четвърта колона, след като сме задали само три? Вижте следното изображение:

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

Бих искал да покажа и по-опростен синтаксис за по-горния пример:

.item1 {
    grid-column: 1 / 4;
}

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

.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;
}

Ето как изглежда това на екрана и не би трябвало да ни затрудни защо става така:

Това е всичко за този път.