CSS. Урок 13 Технологія CSS Grid
1.Контейнер grid
Grid це двувимірна сітка. За домопогою Grid створюються двовимірні макети веб-сторінок.
Сітка Grid створюється в контейнері, якому надається стиль display:grid. Так як сітка двовимірна, то необхідно перш за все визначити кількість стовпчиків та рядків.
1.1 Стовпці
Для того, щоб в макеті вказати кількість стовпчиків та їх розмір, застосовують властивість grid-template-columns
Наприклад стиль: grid-template-columns: 200px auto 400px; вказує на те, що в макеті 3 стовпчики. Розмір auto означає, що стовпчик не має фіксованого розміру, а визначається розміром вікна та контентом.
1.2 Рядки
Якщо відома кількість стовпців, то рядки створюються автоматично, тому бажано, щоб кількість елементів сітки була кратна кількості стовпців. Саме тому кількість рядків не вказується. За замовченням висота рядків auto, тобто визначається розміром контенту. Але, якщо виникає необхідність встановити фіксований розмір рядка, тоді застосовують властивість grid-template-rows
Наприклад стиль: grid-template-rows:auto 400px; вказує на те, що другий рядок має фіксовану висоту.
1.3 Простір між елементами
Якщо треба задати відстань між стовпчиками, то використовують властивість column-gap, наприклад стиль column-gap:10px вказує на те, що між стовпчиками сітки 10px;
Якщо треба задати відстань між рядками, то використовують властивість row-gap, наприклад стиль row-gap:15px вказує на те, що між рядками сітки 15px;
Якщо треба вказати однакову відстань між рядками і стовпчиками, то використовують властивість grid-gap, наприклад стиль grid-gap:5px вказує на те, що між елементами сітки 5px;
Приклад:
display:grid;
grid-template-columns: 120px auto 200px;
grid-template-rows: auto 400px;
grid-gap:10px;
background-color: #2196F3;
padding: 10px;
}
div {
padding: 20px;
font-size: 30px;
background-color: lightblue;
text-align:center;
}
<HEAD>
<link rel="stylesheet" href="file.css">
</HEAD>
<BODY>
<div class = container>
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>
<div> 5 </div>
<div> 6 </div>
</div>
</BODY> </HTML>
2. Об'єднання елементів сітки
Для об'єднання клітнок по горизонталі треьа застосувати властивість grid-column та ключеве слово span
. Наприклад стиль: grid-column: 2/span 3 Означатиме, що три клітини по-горізонталі об'єднаються в одну, починаючи з другої.
Для об'єднання клітнок по горизонталі треьа застосувати властивість grid-column та ключеве слово span
. Наприклад стиль: grid-row: 1/span 2 Означатиме, що дві клітини по-вертикалі об'єднаються в одну, починаючи з першої.
display:grid;
grid-template-columns: auto auto auto auto;
grid-gap:10px;
background-color: #2196F3;
padding: 10px;
}
div {
padding: 20px;
font-size: 30px;
background-color: lightblue;
text-align:center;
}
.columnspan
{
grid-column: 2/ span 2;
}
.rowspan
{
grid-row: 1/ span 3;
}
<HEAD>
<link rel="stylesheet" href="file.css">
</HEAD>
<BODY>
<div class = container>
<div class = rowspan> 1 </div>
<div class = columnspan> 2 </div>
<div> 3 </div>
<div> 4 </div>
<div> 5 </div>
<div> 6 </div>
<div> 7 </div>
<div> 8 </div>
<div> 9 </div>
</div>
</BODY> </HTML>
Виконайте вправу в редакторі html
Розробіть сторінку за макетом, використовуючи grid. Завантажити макет.