gap (grid-gap)

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

Свойство gap CSS задаёт отступы (gutters) между столбцами и строками, а не вдоль края контейнера сетки. Является сокращением для свойств row-gap и column-gap.

The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.

CSS Grid Layout initially defined the grid-gap property. This prefixed property is being replaced by gap. However, in order to support browsers that implemented grid-gap and not gap for grid, you will need to use the prefixed property as in the interactive example above.

Syntax

/* One <length> value */
gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;

/* One <percentage> value */
gap: 16%;
gap: 100%;

/* Two <length> values */
gap: 20px 10px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;

/* One or two <percentage> values */
gap: 16% 100%;
gap: 21px 82%;

/* calc() values */
gap: calc(10% + 20px);
gap: calc(20px + 10%) calc(10% - 5px);

/* Global values */
gap: inherit;
gap: initial;
gap: unset;

This property is specified as a value for <'row-gap'> followed optionally by a value for <'column-gap'>. If <'column-gap'> is omitted, it’s set to the same value as <'row-gap'>.

<'row-gap'> and <'column-gap'> are each specified as a <length> or a <percentage>.

Values

<length>
Is the width of the gutter separating the grid lines.
<percentage>
Is the width of the gutter separating the grid lines, relative to the dimension of the element.

Formal syntax

<'row-gap'> <'column-gap'>?

Examples

Flex layout

HTML

<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  gap: 20px 5px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  width: 100px; 
  height: 50px; 

}

Result

Grid layout

HTML

<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#grid {
  display: grid;
  height: 200px;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 20px 5px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}

Result

Multi-column layout

HTML

<p class="content-box">
  This is some multi-column text with a 40px column
  gap created with the CSS <code>gap</code> property.
  Don't you think that's fun and exciting? I sure do!
</p>

CSS

.content-box {
  column-count: 3;
  gap: 40px;
}

Result

Specifications

Specification Status Comment
CSS Box Alignment Module Level 3
Определение 'gap' в этой спецификации.
Рабочий черновик Initial definition
Начальное значениекак и у каждого из подсвойств этого свойства:
Применяется кmulti-column elements, flex containers, grid containers
Наследуетсянет
Обработка значениякак и у каждого из подсвойств этого свойства:
  • row-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
  • column-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animation typeкак и у каждого из подсвойств этого свойства:

Browser compatibility

Support in Flex layout

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
Supported in Flex LayoutChrome Полная поддержка 84Edge Полная поддержка 84Firefox Полная поддержка 63IE Нет поддержки НетOpera Полная поддержка 70Safari Нет поддержки НетWebView Android Полная поддержка 84Chrome Android Полная поддержка 84Firefox Android Полная поддержка 63Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки

Support in Grid layout

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
Supported in Grid LayoutChrome Полная поддержка 66
Полная поддержка 66
Полная поддержка 57
Альтернативное имя
Альтернативное имя Использует нестандартное имя: grid-gap
Полная поддержка 29
Альтернативное имя Отключено
Альтернативное имя Использует нестандартное имя: grid-gap
Отключено From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Полная поддержка 16
Полная поддержка 16
Полная поддержка 16
Альтернативное имя
Альтернативное имя Использует нестандартное имя: grid-gap
Firefox Полная поддержка 61
Полная поддержка 61
Полная поддержка 52
Альтернативное имя
Альтернативное имя Использует нестандартное имя: grid-gap
Нет поддержки 40 — 59
Альтернативное имя Отключено
Альтернативное имя Использует нестандартное имя: grid-gap
Отключено From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка 53
Полная поддержка 53
Полная поддержка 44
Альтернативное имя
Альтернативное имя Использует нестандартное имя: grid-gap
Полная поддержка 28
Альтернативное имя Отключено
Альтернативное имя Использует нестандартное имя: grid-gap
Отключено From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Полная поддержка 10.1
Альтернативное имя
Полная поддержка 10.1
Альтернативное имя
Альтернативное имя Использует нестандартное имя: grid-gap
Полная поддержка 12
WebView Android Полная поддержка 66
Полная поддержка 66
Полная поддержка 57
Альтернативное имя
Альтернативное имя Использует нестандартное имя: grid-gap
Chrome Android Полная поддержка 66
Полная поддержка 66
Полная поддержка 57
Альтернативное имя
Альтернативное имя Использует нестандартное имя: grid-gap
Полная поддержка 29
Альтернативное имя Отключено
Альтернативное имя Использует нестандартное имя: grid-gap
Отключено From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Полная поддержка 61
Полная поддержка 61
Полная поддержка 52
Альтернативное имя
Альтернативное имя Использует нестандартное имя: grid-gap
Нет поддержки 40 — 59
Альтернативное имя Отключено
Альтернативное имя Использует нестандартное имя: grid-gap
Отключено From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 47
Полная поддержка 47
Полная поддержка 43
Альтернативное имя
Альтернативное имя Использует нестандартное имя: grid-gap
Полная поддержка 28
Альтернативное имя Отключено
Альтернативное имя Использует нестандартное имя: grid-gap
Отключено From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Полная поддержка 10.3
Альтернативное имя
Полная поддержка 10.3
Альтернативное имя
Альтернативное имя Использует нестандартное имя: grid-gap
Полная поддержка 12
Samsung Internet Android Полная поддержка 9.0
Полная поддержка 9.0
Полная поддержка 7.0
Альтернативное имя
Альтернативное имя Использует нестандартное имя: grid-gap
calc() valuesChrome Полная поддержка 66Edge Полная поддержка 16Firefox Полная поддержка 52IE Нет поддержки НетOpera Полная поддержка 53Safari Нет поддержки НетWebView Android Полная поддержка 66Chrome Android Полная поддержка 66Firefox Android Полная поддержка 52Opera Android Полная поддержка 47Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 9.0
<percentage> valuesChrome Полная поддержка 66Edge Полная поддержка 16Firefox Полная поддержка 52IE Нет поддержки НетOpera Полная поддержка 53Safari Нет поддержки НетWebView Android Полная поддержка 66Chrome Android Полная поддержка 66Firefox Android Полная поддержка 52Opera Android Полная поддержка 47Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 9.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.
Использует нестандартное имя.
Использует нестандартное имя.

Support in Multi-column layout

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
Supported in Multi-column LayoutChrome Полная поддержка 66Edge Полная поддержка 16Firefox Полная поддержка 61IE Нет поддержки НетOpera Полная поддержка 53Safari Нет поддержки НетWebView Android Полная поддержка 66Chrome Android Полная поддержка 66Firefox Android Полная поддержка 61Opera Android Полная поддержка 47Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 9.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки

See also