From 59e49bd4bcd8429ffdb259d82ddd7049a03562d1 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 21 Feb 2022 14:39:57 +0300 Subject: (ru) Translate articles about column-gap and row-gap at Web/CSS (#4087) Co-authored-by: Sasha Sushko --- files/ru/web/css/column-gap/index.md | 166 +++++++++++++++++++++++++++++++++++ files/ru/web/css/row-gap/index.md | 136 ++++++++++++++++++++++++++++ 2 files changed, 302 insertions(+) create mode 100644 files/ru/web/css/column-gap/index.md create mode 100644 files/ru/web/css/row-gap/index.md diff --git a/files/ru/web/css/column-gap/index.md b/files/ru/web/css/column-gap/index.md new file mode 100644 index 0000000000..ffabc98b91 --- /dev/null +++ b/files/ru/web/css/column-gap/index.md @@ -0,0 +1,166 @@ +--- +title: column-gap (grid-column-gap) +slug: Web/CSS/column-gap +tags: + - CSS + - CSS Flexible Boxes + - CSS Grid + - CSS Multi-column Layout + - CSS Property + - Reference + - column-gap + - recipe:css-property +browser-compat: css.properties.column-gap +--- +{{CSSRef}} + +Свойство [CSS](/ru/docs/Web/CSS) **`column-gap`** устанавливает промежуток ({{glossary("Gutters","интервал")}}) между колонками. + +{{EmbedInteractiveExample("pages/css/column-gap.html")}} + +Изначально свойство появилось в [многоколоночной раскладке](/ru/docs/Web/CSS/CSS_Columns). Позже оно перекочевало в другие методы раскладки, и теперь `column-gap` определено в спецификации [Box Alignment](/ru/docs/Web/CSS/CSS_Box_Alignment). А значит может использоваться в многоколоночной, флексбокс- и грид-раскладках. + +## Синтаксис + +```css +/* Значение в виде ключевого слова */ +column-gap: normal; + +/* Значение типа */ +column-gap: 3px; +column-gap: 2.5em; + +/* Значение типа */ +column-gap: 3%; + +/* Глобальные значения */ +column-gap: inherit; +column-gap: initial; +column-gap: revert; +column-gap: unset; +``` + +Свойство `column-gap` может быть задано одним из значений, перечисленных ниже. + +### Значений + +- `normal` + - : Между колонками используется стандартное расстояние, определённое браузером. В случае многоколоночной раскладки это будет `1em`. Для всех остальных типов раскладки это значение равно нулю. +- {{CSSxRef("<length>")}} + - : Размер промежутка между колонками, определяемое единицам измерения {{CSSxRef("<length>", "длины")}}. Значение {{CSSxRef("<length>")}} должно быть положительным. +- {{CSSxRef("<percentage>")}} + - : Размер промежутка между колонками, указанный в {{CSSxRef("<percentage>", "процентах")}}. Значение {{CSSxRef("<percentage>")}} должно быть положительным. + +## Формальное определение + +{{cssinfo}} + +## Формальный синтаксис + +{{csssyntax}} + +## Примеры + +### Флексбокс-раскладка + +#### HTML + +```html +
+
+
+
+
+``` + +#### CSS + +```css +#flexbox { + display: flex; + height: 100px; + column-gap: 20px; +} + +#flexbox > div { + border: 1px solid green; + background-color: lime; + flex: auto; +} +``` + +#### Результат + +{{EmbedLiveSample("Флексбокс-раскладка", "auto", "120px")}} + +### Грид-раскладка + +#### HTML + +```html +
+
+
+
+
+``` + +#### CSS + +```css +#grid { + display: grid; + height: 100px; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: 100px; + column-gap: 20px; +} + +#grid > div { + border: 1px solid green; + background-color: lime; +} +``` + +#### Результат + +{{EmbedLiveSample("Грид-раскладка", "auto", "120px")}} + +### Многоколоночная раскладка + +#### HTML + +```html +

+ This is some multi-column text with a 40px column + gap created with the CSS `column-gap` property. + Don't you think that's fun and exciting? I sure do! +

+``` + +#### CSS + +```css +.content-box { + column-count: 3; + column-gap: 40px; +} +``` + +#### Результат + +{{EmbedLiveSample("Многоколоночная раскладка", "auto", "120px")}} + +## Спецификации + +{{Specifications("css.properties.column-gap.grid_context")}} + +## Поддержка браузерами + +{{Compat}} + +## Смотрите также + +- Похожие CSS-свойства: {{CSSxRef("row-gap")}}, {{CSSxRef("gap")}} +- Руководство по грид-раскладке: _[Основы грид-раскладки - Интервалы](/ru/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#gutters)_ +- Руководство по многоколоночной раскладке: _[Стилизация колонок](/ru/docs/Web/CSS/CSS_Columns/Styling_Columns)_ diff --git a/files/ru/web/css/row-gap/index.md b/files/ru/web/css/row-gap/index.md new file mode 100644 index 0000000000..d17861c8a8 --- /dev/null +++ b/files/ru/web/css/row-gap/index.md @@ -0,0 +1,136 @@ +--- +title: row-gap (grid-row-gap) +slug: Web/CSS/row-gap +tags: + - CSS + - CSS Flexible Boxes + - CSS Grid + - CSS Property + - Reference + - recipe:css-property + - row-gap +browser-compat: css.properties.row-gap +--- +{{CSSRef}} + +Свойство [CSS](/ru/docs/Web/CSS) **`row-gap`** устанавливает промежуток ({{glossary("gutters","интервал")}}) между рядами. + +{{EmbedInteractiveExample("pages/css/row-gap.html")}} + +## Синтаксис + +```css +/* Значения типа */ +row-gap: 20px; +row-gap: 1em; +row-gap: 3vmin; +row-gap: 0.5cm; + +/* Значения типа */ +row-gap: 10%; + +/* Глобальные значения */ +row-gap: inherit; +row-gap: initial; +row-gap: revert; +row-gap: unset; +``` + +### Значения + +- `` + - : Ширина интервала, разделяющего ряды. {{CSSxRef("<percentage>", "Процентные")}} значения рассчитываются относительно размера грид-элемента. + +## Формальное определение + +{{cssinfo}} + +## Формальный синтаксис + +{{csssyntax}} + +## Примеры + +### Флексбокс-раскладка + +#### HTML + +```html +
+
+
+
+
+
+
+
+``` + +#### CSS + +```css +#flexbox { + display: flex; + flex-wrap: wrap; + width: 300px; + row-gap: 20px; +} + +#flexbox > div { + border: 1px solid green; + background-color: lime; + flex: 1 1 auto; + width: 100px; + height: 50px; +} +``` + +#### Результат + +{{EmbedLiveSample('Флексбокс-раскладка', "auto", "120px")}} + +### Грид-раскладка + +#### HTML + +```html +
+
+
+
+
+``` + +#### CSS + +```css +#grid { + display: grid; + height: 200px; + grid-template-columns: 200px; + grid-template-rows: repeat(3, 1fr); + row-gap: 20px; +} + +#grid > div { + border: 1px solid green; + background-color: lime; +} +``` + +#### Результат + +{{EmbedLiveSample('Грид-раскладка', 'auto', 120)}} + +## Спецификации + +{{Specifications("css.properties.row-gap.grid_context")}} + +## Поддержка браузерами + +{{Compat}} + +## Смотрите также + +- Похожие CSS-свойства: {{CSSxRef("column-gap")}}, {{CSSxRef("gap")}} +- Руководство по грид-раскладке: _[Основы грид-раскладки - Интервалы](/ru/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#gutters)_ -- cgit v1.2.3-54-g00ecf