Які підходи у верстці вам відомі (float, flex, grid, etc)?

Повне пояснення

Що це і навіщо

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

Ключові принципи, терміни, інваріанти

• Flex‑контейнер: display:flex;.
• Grid‑контейнер: display:grid;.
• Float‑елемент: float:left/right;.

Як це працює

• Flexbox розподіляє простір між дочірніми елементами за правилами justify-content, align-items.
• Grid визначає шаблон рядків і колонок через grid-template-columns, grid-template-rows.
• Float обтіканням розташовує елементи, залишаючи текст навколо.

Практика і реалізація

/* Flexbox приклад */
.container { display:flex; justify-content:space-between; }

/* Grid приклад */
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }

Тестування

• Перевірка адаптивності за допомогою @media.
• Використання DevTools для візуалізації Flexbox/Grid.

Оптимізація продуктивності

• Уникайте вкладених Flexbox‑контейнерів, коли Grid достатній.
• Для великих списків використовуйте display:contents або position:absolute.

Accessibility

• Використовуйте семантичні елементи (<nav>, <section>), щоб ARIA не потрібна.

Безпека та валідація

• Не використовуйте float для критичних елементів, бо може призвести до «залипання» контенту.

Типові помилки й edge cases

• Залишені float:clear можуть створювати зайві блоки.
• Grid‑елементи без grid-auto-flow можуть не заповнювати простір.

Cheatsheet + follow‑up питання

• Коли вибирати Flexbox: одновимірні лінійні макети.
• Коли вибирати Grid: двовимірні сітки, складна розмітка.
• Питання: Як об’єднати Flexbox і Grid у одному проекті?