Перейти к содержанию

gap

Свойство gap устанавливает промежутки между строками и столбцами сетки. Это сокращение для row-gap и column-gap.

Демо

Flexbox и выравнивание

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* 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;

Спецификации

Поддержка браузерами

gap для колонок (columns):

  • Chrome 66+
  • Edge 16+
  • Firefox 61+

gap для Grid-раскладки:

  • Chrome 66+
  • Edge 16+
  • Firefox 61+
  • Safari 10.1+

gap для Flex-раскладки:

Can I Use flexbox-gap? Data on support for the flexbox-gap feature across the major browsers from caniuse.com.

Описание и примеры

Flex

HTML:

1
2
3
4
5
6
7
8
<div id="flexbox">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
#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;
}

Grid

HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div id="grid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
#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;
}

См. также

Комментарии