Використання CSS Grid та Flexbox для складних макетів

“Заглибившись над вашим ноутбуком, відблиск коду відбивається в вашіх відданих очах, вас наповнює почуття захоплення. Шановні дами та господа (і якщо ви собака, яка освоїла HTML, то й вам ‘гав’ теж), настав час для відвертої розмови – час розглянути двох великих гравців у всесвіті розмітки CSS: Grid та Flexbox.
Без будь-яких зайвих слів давайте поринемо в світ складних розміток, де CSS Grid та Flexbox панують над усім.

Розуміння CSS Grid

CSS Grid, Пікассо у розмітці веб-сайтів, дозволяє вам перетворити свій сайт у полотно. Розбиваючи ваш сайт на рядки та стовпці, Grid дозволяє вам контролювати розміщення елементів по обох осях. Тож, якщо ви коли-небудь мріяли про ідеальні двовимірні розмітки, то Grid має стати вашим вибором.

Магія стовпців та рядків Grid

При використанні CSS Grid ви створюєте контейнер сітки, використовуючи властивість відображення на ваші елементи HTML. Встановлюючи цю властивість на grid або inline-grid, ви застосовуєте структуру сітки до дочірніх елементів. Подумайте про це як про роздачу колоди карт, де кожній карті відводиться своє місце у порядку.

html
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

css
.grid-container {
  display: grid;
}

Вигніть, як Flexbox

Flexbox, або Гнучка модель веб-розмітки, є одновимірною моделлю розмітки, яка дозволяє вам контролювати розташування елементів горизонтально або вертикально. Це схоже на можливість розмістити ряд качок (або зображення, текст, будь-що що заточує ваш олівець!), забезпечуючи їх порядність незалежно від розміру екрану.

Контейнер Flex та елементи Flex

Хіба не час трохи розім’яти м’язи? Як і з Grid, ви активуєте Flexbox, використовуючи властивість відображення, встановлюючи її на flex або inline-flex. Тепер ваші елементи – це гнучкі елементи, готові до тренажерного залу Flex!

html
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

css
.flex-container {
  display: flex;
}

Grid проти Flexbox: Коли використовувати що?

Хоча Grid та Flexbox можуть здатися схожими, вони такі ж різні, як собаки і коти. Grid – це потужний інструмент для побудови складних двовимірних розміток. Flexbox, однак, неперевершений у вирівнюванні елементів вздовж однієї вісі. Можна сказати, що обирайте Grid, коли плануєте розміщення цілого міста, а на Flexbox можна покластися, коли просто переставляєте меблі.
Тож пам’ятайте, що Grid та Flexbox – це важливі інструменти CSS, які допомагають вам створювати складні розмітки. Не важливо, чи маєте ви на меті зробити свій веб-сайт таким же стильним, як Tesla, чи з атмосферою вінтажного магазину вінілових пластинок, володіння цими двома атрибутами CSS надасть вам справжні суперсилу розмітки. Точно так само, як шпинат допоміг Попаяну!”