Властивість зазору в CSS є скороченим словом row-gapі column-gap, що визначає розмір жолобів, тобто простір між рядками та стовпцями в макетах сітки, гнучкості та багатостовпців.
/* Grid layout */ .container ( display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 2fr 1fr; gap: 30px 20px; ) /* Flex layout */ .container ( display: flex; gap: 10%; ) /* Multi-column layout */ .container ( column-count: 5; gap: 20px; )
Використовуйте повзунок у демонстраційній версії нижче, щоб побачити gapвластивість у дії:
Синтаксис
gap приймає одне або два значення:
- Одне значення встановлює як одне, так
row-gapіcolumn-gapодне значення. - Коли використовуються два значення, перше встановлює,
row-gapа друге -column-gap.
.container ( gap: 1rem; /* Is equivalent to: * row-gap: 1rem; * column-gap: 1rem */ gap: 10px 15%; /* Is equivalent to: * row-gap: 10px; * column-gap: 15%; */ )Специфікація для модуля розмітки сітки CSS визначала простір між доріжками сітки, використовуючи grid-gapвластивість. gapпризначений для його заміни, щоб прогалини можна було визначити в декількох методах розмітки CSS, таких як flexbox, але grid-gapвсе ще потрібно використовувати в тих випадках, коли браузер, можливо, реалізував, grid-gapале ще не почав підтримувати новішу gapвластивість.
Цінності
gap приймає такі значення:
normal: (За замовчуванням) Браузер вкаже використовуване значення 1em для макета з декількома стовпцями та 0px для всіх інших контекстів макета (тобто grid та flex).: Будь-яка дійсна і неотрицательная довжина CSS, такі якpx,em,remі%, серед інших.: Розмір зазору як невід’ємне відсоткове значення щодо розмірності елемента. (Детальніше див. Нижче).initial: Застосовує значення властивості за замовчуванням, яке єnormal.inherit: Приймає значення розриву для батьків.unset: Видаляє струмgapз елемента.
Відсотки властивостей щілини
Коли розмір контейнера в розмірі зазору визначений, визначає gapвідсотки до розміру вікна вмісту контейнера в будь-яких типах макета.
Іншими словами, коли браузер знає розмір контейнера, він може обчислити відсоткове значення gap. Наприклад, коли висота контейнера становить 100 пікселів, а значення gap- 10%, браузер знає, що 10% 100 пікселів - це 10 пікселів.
Але коли браузер не знає розмір, він запитає: "10% від чого?" У цих випадках gapповодиться по-різному залежно від типу макета.
У макеті сітки відсотки вирішуються проти нуля для визначення власних внесків розміру, але вирішуються проти вікна вмісту елемента при викладанні вмісту вікна, це означає, що між елементами буде пробіл, але пробіл не впливає на розмір контейнера.
У цій демонстрації висота контейнера не визначена. Подивіться, що відбувається при збільшенні gapрозміру. Потім встановіть gapпіксельні одиниці та повторіть спробу:
У гнучкому макеті відсотки у всіх випадках вирішуються проти нуля, а це означає, що прогалини не застосовуватимуться, коли розмір контейнера не відомий браузеру:
Використання функції calc () із зазором
Ви можете використовувати calc()функцію, щоб вказати розмір, gapале на момент написання цієї статті його не підтримується в Safari та iOS.
.flex-layout ( display: flex; gap: calc(5vh + 5px) calc(5vw + 5px); )
.grid-layout ( display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(5vmin + 5px); )Приклади
gapВластивість призначене для використання в мережевих, флекс і кілька колонок макетів. Давайте перевіримо кілька прикладів.
Розмітка сітки
У наступній демонстрації ви можете бачити, gapяк використовується для вказівки властивостей row-gapта column-gapвластивостей контейнера сітки, визначаючи жолоби між рядками сітки та стовпцями сітки відповідно:
Розмітка гнучка
Застосування зазору до головної осі гнучкого контейнера вказує інтервал між гнучкими елементами в одному рядку гнучкого макета.
Ось column-gapвикористовується в напрямку рядка:
Ось row-gapвикористовується в напрямку стовпця:
Застосування gapдо поперечної осі гнучкого контейнера вказує інтервал між гнучкими лініями гнучкого макета.
Ось row-gapв рядку:
Ось column-gapу напрямку стовпця:
Макет із кількома стовпцями
column-gapз'являється в макетах із декількох стовпців, щоб створити пробіли між полями стовпців, але зауважте, що row-gapце не робить ефекту, оскільки ми працюємо лише в стовпцях. gapвсе ще може використовуватися в цьому контексті, але застосовуватиметься лише те column-gap.
Як ви можете бачити в наступній демонстрації, хоча gapвластивість має значення 2rem, воно розділяє елементи лише горизонтально, а не в обох напрямках, оскільки ми працюємо в стовпцях:
Тим більше ти знаєш ...
Є кілька речей, на які варто звернути увагу щодо роботи з gapвласністю.
Це хороший спосіб запобігти небажаним інтервалам
Ви коли-небудь використовували поля для створення інтервалу між елементами? Якщо ми не будемо обережні, ми можемо отримати додатковий інтервал до і після групи елементів.
Вирішення, яке зазвичай вимагає додавання від’ємних полів або вдавання до псевдоселекторів для видалення поля з певних елементів. Але приємна річ у використанні gapв більш сучасних методах макетування полягає в тому, що у вас є простор між елементами. Додатковий обрив на початку та в кінці ніколи не є проблемою!
Але, ей, якщо ви хочете, щоб у вас було місце навколо предметів під час використання gap, розмістіть paddingнавколо контейнера так:
.container ( display: flex; gap: 1rem; padding: 1rem; )Розмір жолоба не завжди дорівнює величині зазору
gapВластивість не єдине , що може поставити простір між елементами. Поля, прокладки, justify-contentа align-contentтакож можуть збільшити розмір жолоба та вплинути на фактичне gapзначення.
У наступному прикладі ми встановлюємо 1em, gapале, як бачите, між елементами є набагато більше місця, спричиненого використанням розподілених вирівнювань, таких як justify-contentі align-content:
Підтримка браузера
Запити до функцій, як правило, є приємним способом перевірити, чи підтримує браузер певну властивість, але в цьому випадку, якщо ви перевірите gapвластивість у flexbox, ви можете отримати хибно позитивний результат, оскільки запит функції не розрізнятиме режими макетування. Іншими словами, це може підтримуватися в гнучкому макеті, що призводить до позитивного результату, але насправді не підтримується, якщо він використовується в макеті сітки.
Розмітка сітки
| IE | Край | Firefox | Chrome | Сафарі | Опера |
|---|---|---|---|---|---|
| Ні | 16+ | 61+ | 66+ | 12+ | 53+ |
| iOS Safari | Opera Mobile | Браузер Android | Chrome для Android | Firefox для Android |
|---|---|---|---|---|
| 12+ | Ні | 81+ | 84+ | 68+ |
Розмітка сітки зі значеннями calc ()
| IE | Край | Firefox | Chrome | Сафарі | Опера |
|---|---|---|---|---|---|
| Ні | 84+ | 79+ | 84+ | Ні | 69+ |
| iOS Safari | Opera Mobile | Браузер Android | Chrome для Android | Firefox для Android |
|---|---|---|---|---|
| Ні | Ні | 81+ | 84+ | 68+ |
Розмітка сітки із процентним значенням
| IE | Край | Firefox | Chrome | Сафарі | Опера |
|---|---|---|---|---|---|
| Ні | 84+ | 79+ | 84+ | Ні | 69+ |
| iOS Safari | Opera Mobile | Браузер Android | Chrome для Android | Firefox для Android |
|---|---|---|---|---|
| Ні | Ні | 81+ | 84+ | 68+ |
Розмітка гнучка
Специфікація для використання gapз flexbox наразі знаходиться у статусі Working Draft.
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 84 | 63 | Ні | 84 | ТП |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | Ні | Ні |
Макет із кількома стовпцями
| IE | Край | Firefox | Chrome | Сафарі | Опера |
|---|---|---|---|---|---|
| Ні | 84+ | 79+ | 84+ | Ні | 69+ |
| iOS Safari | Opera Mobile | Браузер Android | Chrome для Android | Firefox для Android |
|---|---|---|---|---|
| Ні | Ні | 81+ | 84+ | 68+ |
Більше інформації
- Модуль вирівнювання коробки CSS рівень 3
- Хром приземляється на розрив у Flexbox (квиток # 761904)
- Статус функції WebKit CSS
Пов’язані
- Розмітка сітки
- Макет Flexbox
- Макет у кілька стовпців