Flexbox проти Grid: Який з них обрати?

Photo by Esther Jiao on Unsplash

У світі CSS контроль розташування елементів на веб-сторінці є надзвичайно важливим. Хоча стандартні display: block та display: inline надають базовий контроль, вони часто виявляються недостатніми для створення складних і адаптивних макетів.

Photo by Esther Jiao on Unsplash

У світі CSS контроль за розташуванням елементів на веб-сторінці є надзвичайно важливим. Хоча стандартні display: block та display: inline надають базовий контроль, вони часто виявляються недостатніми при створенні складних і адаптивних макетів.

Розуміння стандартного потоку

Перш ніж зануритись у Flexbox і Grid, давайте швидко розберемо стандартну поведінку елементів:

display: block

• Елементи з'являються на новому рядку.
• Ширина елемента за замовчуванням дорівнює ширині батьківського контейнера.
• Висота визначається вмістом всередині елемента.

display: inline

• Елементи з'являються на тому ж рядку, що й інші елементи типу inline.
• Ширина визначається вмістом всередині елемента.

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

Flexbox: Одновимірна сила

Flexbox, або Flexible Box Layout, чудово підходить для розташування елементів уздовж однієї осі (рядок або стовпець).

Ключові концепції:

• Flex Container: Батьківський елемент, що містить гнучкі елементи.
• Flex Items: Дочірні елементи всередині Flex контейнера.
• Flex Direction: Контролює основну вісь Flex контейнера (рядок або стовпець).
• Justify Content: Вирівнює елементи по основній осі.
• Align Items: Вирівнює елементи по поперечній осі.
• Order: Контролює порядок, у якому елементи з'являються.

Робота з Flexbox:

Задайте display: flex для батьківського елемента:

.container {   
 display: flex;   
}

Застосуйте властивості flex до дочірніх елементів за потреби:

.item {  
 flex-grow: 1; /* Розширюється, щоб заповнити доступний простір */  
 flex-basis: 0; /* Початковий розмір елемента */  
 flex-shrink: 0; /* Запобігає зменшенню */  
}

Приклад:

Block 1
Block 2
 ```  ``` .container {    height: 50vh;    width: 50vw;    background-color: aliceblue;    border: 2px solid black;    padding: 2rem;    /* Flex властивості */    display: flex;    gap: 5px; /* відстань між дітьми */    }       .block-1 {    width: 400px;    height: 400px;    background-color: red;    color: white;    padding: 2rem;    }       .block-2 {    width: 400px;    height: 400px;    background-color: blue;    color: white;    padding: 2rem;    } ```  ![pic](https://drive.javascript.org.ua/bc72dd86661_smqLxBBMB05E9uI1bCYTOw_png)  _Результат наведеного прикладу_  ## Grid: Двовимірна майстерність  

Grid Layout, в свою чергу, надає **двовимірну сітку** для розташування елементів.

## Ключові концепції:

- **Grid Container:** Батьківський елемент, що визначає сітку.
- **Grid Items:** Дочірні елементи всередині контейнера сітки.
- **Grid Tracks:** Ряди та стовпці, що складають сітку.
- **Grid Lines:** Лінії, що визначають межі сіткових ліній.
- **Grid Cells:** Перехрестя сіткових ліній.

## Робота з Grid:

Задайте `display: grid` для батьківського елемента:

.container {
display: grid;
}
```

Визначте структуру сітки:

.container {    
 grid-template-columns: repeat(3, 1fr); /* Створити 3 стовпці рівної ширини */    
 grid-template-rows: 100px 200px; /* Створити 2 ряди з вказаними висотами */    
}  

Розміщуйте елементи в межах сітки:

.item1 {    
 grid-column: 1 / 3; /* Охоплює 2 стовпці */    
 grid-row: 1 / 3; /* Охоплює 2 ряди */    
}  

Приклад:

Block 1
Block 2
Block 3

.container {    
 height: 50vh;    
 width: 50vw;    
 background-color: aliceblue;    
 border: 2px solid black;    
 padding: 2rem;    
 /* Grid властивості */    
 display: grid;    
 grid-template-columns: repeat(3, 1fr); /* Створити 3 стовпці рівної ширини */    
 grid-template-rows: 100px 200px 150px; /* Створити 3 ряди з вказаними висотами */    
 gap: 5px;   
}  

 .block-1 {    
 background-color: red;    
 padding: 2rem;       
 grid-column: 1 / 3; /* Охоплює 2 стовпці */    
 grid-row: 1 / 3; /* Охоплює 2 ряди */    
}

.block-2 {  
 background-color: blue;  
 color: white;  
 padding: 2rem;  

 grid-column: 3 / 4; /* Охоплює 1 стовпець */  
 grid-row: 1 / 3; /* Охоплює 2 ряди */  
}  

.block-3 {  
 background-color: green;  
 color: white;  
 padding: 2rem;  

 grid-column: 1/ 4; /* Охоплює 3 стовпці */  
 grid-row: 3 / 4; /* Охоплює 1 ряд */  
}

Результат наведеного прикладу

Коли використовувати що?

Використовуйте Flexbox, коли:

• Потрібно розташувати елементи вздовж однієї осі.
• Потрібно розподілити простір між елементами.
• Маєте простий, лінійний макет.

Використовуйте Grid, коли:

• Потрібно створити складні двовимірні макети з рядами та стовпцями.
• Потрібно точно позиціонувати елементи в межах сітки.
• Потрібно перекривати елементи.

Висновок

Обидва інструменти, Flexbox та Grid, є потужними засобами для створення гнучких і адаптивних макетів.
Розуміння їхніх сильних і слабких сторін допоможе вам вибрати правильний інструмент для виконання завдання. Комбінуючи ці техніки, ви зможете створювати вражаючі та складні дизайни, які безшовно адаптуються до різних пристроїв.

Дякую за читання 😀

Перекладено з: Flexbox vs. Grid: Which One Should You Use?