𝗖𝗦𝗦 𝗚𝗿𝗶𝗱 𝘃𝘀 𝗙𝗹𝗲𝘅𝗯𝗼𝘅
Припиніть боротися зі своїми CSS-макетами.
Раніше я витрачав години на виправлення зламаних макетів за допомогою Flexbox. Я намагався розмістити елементи в ряд, але останній елемент розтягувався на весь екран. Це виглядало неправильно. Я пробував відступи та інші хитрощі, але нічого не допомагало.
Потім я змінив свій підхід на CSS Grid.
Різниця проста:
- Flexbox призначений для одновимірних макетів. Використовуйте його для одного рядка або однієї колонки.
- CSS Grid призначений для двовимірних макетів. Використовуйте його, коли вам потрібно керувати одночасно і рядками, і колонками.
Сприймайте Flexbox як інструмент для дрібних завдань. Сприймайте Grid як інструмент для структури всієї сторінки.
Пастка Flexbox: Коли ви використовуєте Flexbox для галереї, елементи можуть не вирівнюватися ідеально на різних розмірах екрана. Часто виникають «осиротілі» елементи, які порушують ритм вашого дизайну.
Рішення Grid: З Grid ви можете створювати адаптивні галереї одним рядком коду.
Використовуйте це:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
Це вказує браузеру вмістити якомога більше колонок по 250px. Браузер сам все порахує. Більше ніяких здогадок. Більше ніяких зламаних рядків.
Приклад дашборду: Створювати дашборд із бічною панеллю, основним контентом і футером важко за допомогою Flexbox. Часто потрібні вкладені контейнери та заплутаний код, щоб футер займав усю ширину.
З Grid ви визначаєте треки один раз:
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
Ви можете наказати футеру розтягнутися від першої до останньої колонки однією командою. Ваш код стає чистим і легким для читання.
Моя порада:
• Використовуйте Flexbox для простого вирівнювання в хедері або кнопках.
• Використовуйте Grid для основних макетів сторінок та складних галерей.
• Припиніть вкладати контейнери лише для того, щоб виправити проблему з макетом.
• Використовуйте одиницю fr для легкого розподілу простору.
Спробуйте це вже сьогодні. Візьміть старий компонент, який ви створили за допомогою Flexbox. Перепишіть його, використовуючи CSS Grid. Ви побачите, що ваш код став коротшим, а макети — надійнішими.