Нека набързо да разгледаме изграждането на макети за уеб сайтовете.
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;
}
Ето как изглежда това на екрана и не би трябвало да ни затрудни защо става така:
Това е всичко за този път.