Що таке grid в CSS3?

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

Основні можливості CSS Grid

1. Гнучке управління рядками та колонками: можна задавати як фіксовані, так і автоматичні розміри.
2. Зручне позиціонування елементів: можна розміщувати елементи у будь-якій області сітки.
3. Підтримка адаптивного дизайну: сітка легко підлаштовується під різні розміри екранів.

CSS Grid використовує контейнер і елементи сітки. Контейнер сітки — це батьківський елемент, який визначає структуру сітки за допомогою властивості display: grid. Елементи всередині контейнера стають частиною цієї сітки й підпорядковуються її правилам.

Для задання рядків і колонок використовується властивість grid-template, яка визначає структуру сітки. Кожну клітинку можна налаштовувати окремо, включаючи її розміри й позицію.

Приклад використання CSS Grid

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto;
    gap: 10px;
    padding: 20px;
}

.grid-item {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

У цьому прикладі контейнер визначає сітку з трьох колонок із різними розмірами: перша і третя колонки мають однакову ширину, а друга займає вдвічі більше місця. Властивість gap додає відстань між елементами.

Кожен елемент усередині контейнера автоматично розміщується у сітці, якщо не вказані конкретні позиції. При необхідності можна вказати, у якому рядку чи колонці має знаходитися елемент, використовуючи властивості grid-column і grid-row.

Додаткові можливості

CSS Grid дозволяє поєднувати фіксовані й автоматичні розміри. Наприклад, використовуючи minmax(), можна задавати мінімальні та максимальні розміри для колонок чи рядків, що спрощує створення адаптивних макетів.

Сітка може бути інтегрована з іншими технологіями, такими як Flexbox, для створення складних макетів, де одні області сторінки використовують сітку, а інші — гнучку модель Flexbox.