Генератор CSS Grid: створення сіткових розміток

CSS Grid: двовимірне компонування

CSS Grid Layout — потужна система двовимірного компонування, що революціонізувала верстку вебсторінок. На відміну від Flexbox, Grid дозволяє одночасно керувати рядками та стовпцями. Це дає змогу створювати складні макети, які раніше вимагали складних хаків або сторонніх фреймворків.

Основний синтаксис Grid

display: grid — активує grid-контейнер. grid-template-columns: repeat(3, 1fr) — три однакові стовпці. grid-template-rows: 100px auto 50px — три рядки різної висоти. gap: 16px — відступ між елементами (або row-gap і column-gap). Одиниця fr (fraction) ділить вільний простір пропорційно.

Розміщення елементів

grid-column: 1 / 3 — елемент займає стовпці 1 і 2. grid-row: 2 / 4 — елемент займає рядки 2 і 3. grid-area: header з іменованими зонами через grid-template-areas — найнаочніший спосіб верстки. Функція minmax() для адаптивних стовпців: repeat(auto-fill, minmax(250px, 1fr)).

Адаптивний Grid без медіазапитів

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) — автоматично підбирає кількість стовпців залежно від ширини контейнера. Вже не потрібно писати breakpoints для простих сіток карток. auto-fill залишає порожні доріжки, auto-fit розтягує існуючі елементи — знайте різницю.