Установить промежуток между строками и между столбцами до 50 пикселей:
.grid-container {
gap: 50px;
}
Попробуйте сами »
Определение gap
CSS свойство gap определяет размер промежутка между строками и столбцами в макете flexbox, grid или с несколькими столбцами. Это сокращение для следующих свойств:
Примечание: CSS свойство gap ранее была известна как grid-gap.
| Значение по умолчанию: | normal normal |
|---|---|
| Унаследовано: | no |
| Анимируемый: | yes. Читайте о animatable Попробуй |
| Версия: | CSS Выравнивание бокса Модуль Уровень 3 |
| JavaScript синтаксис: | object.style.gap="50px 100px" Попробуй |
Поддержка gap
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| gap (in Grid) | 66 | 16 | 61 | 12 | 53 |
| gap (in Flexbox) | 84 | 84 | 63 | 14.1 | 70 |
| gap (in Multiple Columns) | 66 | 16 | 61 | Не поддерживается | 53 |
Синтаксис gap
gap: row-gap column-gap|initial|inherit;
Значения gap
| Значение | Описание | Демонстрация |
|---|---|---|
| row-gap | Установить размер промежутка между строками в макете сетки или гибкого бокса | Демо ❯ |
| column-gap | Установить размер промежутка между столбцами в сетке, гибком боксе или многоколоночном макете | Демо ❯ |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры gap
Grid макет
Установить расстояние между строками должно составлять 20 пикселей, а между столбцами - 50 пикселей в макете grid:
#grid-container {
display: grid;
gap: 20px 50px;
}
Попробуйте сами »
Flexbox макете
Установить расстояние между строками должно составлять 20 пикселей, а между столбцами - 70 пикселей в макете flexbox:
#flex-container {
display: flex;
gap: 20px 70px;
}
Попробуйте сами »
Multi-column макете
Установить расстояние между столбцами до 50 пикселей в макете multi-column:
#newspaper {
columns: 3;
gap: 50px;
}
Попробуйте сами »
Страницы по теме gap
CSS Учебник: CSS Grid Layout
CSS Учебник: CSS Макет гибкого бокса
CSS Учебник: CSS Многоколоночный макет
CSS Справочник: row-gap свойство
CSS Справочник: column-gap свойство