diff options
| -rw-r--r-- | files/ru/web/css/column-gap/index.md | 166 | ||||
| -rw-r--r-- | files/ru/web/css/row-gap/index.md | 136 |
2 files changed, 302 insertions, 0 deletions
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; + +/* Значение типа <length> */ +column-gap: 3px; +column-gap: 2.5em; + +/* Значение типа <percentage> */ +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 +<div id="flexbox"> + <div></div> + <div></div> + <div></div> +</div> +``` + +#### 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 +<div id="grid"> + <div></div> + <div></div> + <div></div> +</div> +``` + +#### 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 +<p class="content-box"> + 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! +</p> +``` + +#### 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 +/* Значения типа <length> */ +row-gap: 20px; +row-gap: 1em; +row-gap: 3vmin; +row-gap: 0.5cm; + +/* Значения типа <percentage> */ +row-gap: 10%; + +/* Глобальные значения */ +row-gap: inherit; +row-gap: initial; +row-gap: revert; +row-gap: unset; +``` + +### Значения + +- `<length-percentage>` + - : Ширина интервала, разделяющего ряды. {{CSSxRef("<percentage>", "Процентные")}} значения рассчитываются относительно размера грид-элемента. + +## Формальное определение + +{{cssinfo}} + +## Формальный синтаксис + +{{csssyntax}} + +## Примеры + +### Флексбокс-раскладка + +#### HTML + +```html +<div id="flexbox"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> +``` + +#### 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 +<div id="grid"> + <div></div> + <div></div> + <div></div> +</div> +``` + +#### 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)_ |