Сітка Grid

Для побудови найпростішої сітки в HTML коді сторінки потрібно створити 2 об'єкти

• батьківський контейнер  (wrapper) (обертається все внутрішні, складові його блоки);
• дочірні (items) (самі елементи)

Найпростіша конструкція коду може виглядати так:

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

Батьківський об'єкт - і є реальна сітка, а всі внутрішні - її наповнення. Щоб зовнішній DIV почав діяти належним чином, потрібно задати класу wrapper відповідне значення grid:

.wrapper {
    display: grid;
}

Однак відразу після цього нічого особливо не зміниться, тому що не визначений формат відображення

Схема  сітки Grid

See the Pen Схема Grid by kravets (@raisa69) on CodePen.

Колонки та рядки сітки

Для створення колонок в контейнері  застосовується властивість grid-template-columns. Кількість  вказаних значень властивості і буде кількістю колонок в сітці. Ширина колонок вказується значеннями через пробіли.

Для створення  рядків сітки в контейнері застосовується властивість grid-template-rows. Кількість  вказаних значень властивості і буде кількістю рядків в сітці. Висота колонок вказується значеннями через пробіли:

• px, em,%, vh, vw - розмір абсолютний (px, pt), відносний (em, vw, vh) або в% від ширини / висоти контейнера. 
• fr (фракція - вільне місце в сітці) - спеціальна одиниця вимірювання в grid. Вільне місце в контейнері ділиться на фракції, так якщо одній колонці вказати 1fr, а інший 2fr, то друга буде більше першої в 2 рази і обидва вони заповнять весь вільний простір. 

Приклад сітки з застосуванням властивостей колонок та рядків із відповідними значеннями:

grid-template-columns: 40px 50px auto 50px 40px; grid-template-rows: 25% 100px auto;

Якщо при перерахунку розмірів колонок є повторювані значення, потрібно використовувати функцію repeat () - яка  Дозволяє повторювати що-небудь N раз. Використовується при створенні колонок / рядів у властивостях: grid-template-rows :, grid-template-columns :, grid-template, формат запису такий:

repeat( скільки_разів, що_повторяти )

Розриви між колонками та рядками 

• grid-row-gap: задає розрив між рядами. 
• grid-column-gap: задає розрив між колонками. 
• grid-gap: задає розрив для рядів і колонок разом.

Установка мінімальних розмірів зі збереженням гнучкості 

Для того  щоб вміст контенту поміщався у grid-елемент, потрібно  встановити мінімальний розмір колонки та рядка за допомогою функції  minmax:

Розташування і розміри grid-елементів

Властивості:

вказують положення елемента в сітці. Тобто grid-елемент розміщується в зазначеному осередку. Вказувати потрібно ім'я або номер лінії до якої відноситься осередок і до якої потрібно прикріпити елемент.

Є можливість скоротити код цих властивостей для колонок та рядків за допомою властивостей:

• grid-column - визначає, у яку колонку помістити елемент, вказавши номер лінії початку колонки та номер кінцевої лінії колонки
• grid-row - визначає, у який рядок помістити елемент, вказавши номер лінії початкового рядка та номер лінії кінцевого рядка

Код буде виглядати тоді так:

.grid-item1 {
grid-column: 2 / 4;
}
.grid-item2 {
grid-row: 2 / 4;
}

 

Динамічний приклад  формування сітки рядків: 

У властивостях grid-column, grid-row за допомогою спеціального слова span можна задати розтягнення елемента на кілька осередків. Після слова span вказується, на яку кількість осередків треба розтягнути елемент:

..grid-item1 {

}

Елемент розташується  в клітинку, яка знаходиться на перетині першого рядка та другого стовпця, і розтягується на два рядки вниз і на два стовпці вправо.

Приклад застосування ключового слова span для формування сітки з 3 колонок:

---

 1. Створити  maket1.html grid-сітки згідно зразка

2.  Створити  maket2.html grid-сітки згідно зразка

3.  Створити  maket3.html grid-сітки згідно зразка