From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/grid-gap/index.html | 193 +++++++++++++++++++++++++++++++++++ 1 file changed, 193 insertions(+) create mode 100644 files/ru/web/css/grid-gap/index.html (limited to 'files/ru/web/css/grid-gap') diff --git a/files/ru/web/css/grid-gap/index.html b/files/ru/web/css/grid-gap/index.html new file mode 100644 index 0000000000..b32f0c2410 --- /dev/null +++ b/files/ru/web/css/grid-gap/index.html @@ -0,0 +1,193 @@ +--- +title: grid-gap +slug: Web/CSS/grid-gap +translation_of: Web/CSS/gap +--- +

{{Deprecated_Header}}

+ +
+

Примечание. Свойство CSS с разделительной сеткой было переименовано в свойство prefix-less {{cssxref('gap')}}.

+
+ +

Свойство CSS grid-gap является сокращенным свойством для {{cssxref("grid-row-gap")}} и {{cssxref("grid-column-gap")}}, определяющего желоба между строками и столбцами сетки.

+ +
{{EmbedInteractiveExample("pages/css/grid-gap.html")}}
+ + + +

Syntax

+ +
/* Одно <length> значение */
+grid-gap: 20px;
+grid-gap: 1em;
+grid-gap: 3vmin;
+grid-gap: 0.5cm;
+
+/* Одно <percentage> значение */
+grid-gap: 16%;
+grid-gap: 100%;
+
+/* Два <length> значения */
+grid-gap: 20px 10px;
+grid-gap: 1em 0.5em;
+grid-gap: 3vmin 2vmax;
+grid-gap: 0.5cm 2mm;
+
+/* Один или два <percentage> значения */
+grid-gap: 16% 100%;
+grid-gap: 21px 82%;
+
+/* calc() значения */
+grid-gap: calc(10% + 20px);
+grid-gap: calc(20px + 10%) calc(10% - 5px);
+
+/* Глобальные значения */
+grid-gap: inherit;
+grid-gap: initial;
+grid-gap: unset;
+
+ +

Это свойство указывается как значение для <'grid-row-gap'> , за которым необязательно следует значение для <'grid-column-gap'>. Если <'grid-column-gap'> опущено, для него устанавливается то же значение, что и <'grid-row-gap'>.

+ +

Каждое из свойств <'grid-row-gap'> и <'grid-column-gap'> указываются как <length> или <percentage>.

+ +

Значения

+ +
+
<length>
+
Ширина отступа, разделяющего линии сетки.
+
<percentage>
+
Ширина отступа, разделяющего линии сетки относительно размеров элемента.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

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);
+  grid-gap: 20px 5px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+
+ +

{{EmbedLiveSample("Example", "100%", "200px")}}

+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSS3 Box Alignment", "#propdef-grid-gap", "grid-gap")}}{{Spec2("CSS3 Box Alignment")}}Устарело в пользу gap
{{SpecName("CSS3 Grid", "#gutters", "grid-gap")}}{{Spec2("CSS3 Grid")}}Начальное определение
+ +

{{cssinfo}}

+ +

Совместимость с браузерами

+ + + +

{{Compat("css.properties.grid-gap")}}

+ +

Смотрите также

+ + + + -- cgit v1.2.3-54-g00ecf