[Rus] RWD: CSS Grid Improved translation of use-grid-column-to-control-spacing (#23427)

This commit is contained in:
elcodex
2018-11-02 23:02:44 +05:00
committed by Gregory Gubarev
parent 39207b4e97
commit fdd56d8e78

View File

@ -3,14 +3,14 @@ id: 5a90372638fddaf9a66b5d38
title: Use grid-column to Control Spacing
challengeType: 0
videoUrl: ''
localeTitle: Использовать grid-column для управления интервалом
localeTitle: Использование grid-column для управления пространством
---
## Description
<section id="description"> До этого момента все свойства, которые обсуждались, предназначены для контейнеров с сеткой. Свойство <code>grid-column</code> является первым для самих элементов сетки. Гипотетические горизонтальные и вертикальные линии, которые создают сетку, называются <dfn>линиями</dfn> . Эти строки нумеруются начиная с 1 в верхнем левом углу сетки и перемещаются вправо для столбцов и вниз для строк, считая вверх. Вот как выглядят линии для сетки 3x3: <div style="position:relative;margin:auto;background:Gainsboro;display:block;margin-top:100px;margin-bottom:50px;width:200px;height:200px;"><p style="left:25%;top:-30%;font-size:130%;position:absolute;color:RoyalBlue;"> строки столбцов </p><p style="left:0%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;"> 1 </p><p style="left:30%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;"> 2 </p><p style="left:63%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;"> 3 </p><p style="left:95%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;"> 4 </p><p style="left:-40%;top:45%;font-size:130%;transform:rotateZ(-90deg);position:absolute;"> строки строк </p><p style="left:-10%;top:-10%;font-size:130%;position:absolute;"> 1 </p><p style="left:-10%;top:21%;font-size:130%;position:absolute;"> 2 </p><p style="left:-10%;top:53%;font-size:130%;position:absolute;"> 3 </p><p style="left:-10%;top:85%;font-size:130%;position:absolute;"> 4 </p><div style="left:0%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:31%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:63%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:95%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:0%;top:0%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:31%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:63%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:95%;width:100%;height:5%;background:black;position:absolute;"></div></div> Чтобы контролировать количество столбцов, которые будет потребляться элементом, вы можете использовать свойство <code>grid-column</code> в сочетании с номерами строк, которые хотите, чтобы элемент начал и остановился. Вот пример: <blockquote> grid-column: 1/3; </blockquote> Это приведет к тому, что элемент начнется с первой вертикальной линии сетки слева и пролетает до третьей линии сетки, потребляя два столбца. </section>
<section id="description"> До этого момента все свойства, которые обсуждались, предназначены для грид контейнеров. Свойство <code>grid-column</code> - первое свойство для использования в элементах грида. Гипотетические горизонтальные и вертикальные линии, которые создают грид, называются <dfn>линиями</dfn> . Эти линии нумеруются начиная с 1 в верхнем левом углу грида и перемещаются вправо для столбцов и вниз для строк. Вот как выглядят линии для грида 3x3: <div style="position:relative;margin:auto;background:Gainsboro;display:block;margin-top:100px;margin-bottom:50px;width:200px;height:200px;"><p style="left:25%;top:-30%;font-size:130%;position:absolute;color:RoyalBlue;"> линии столбцов </p><p style="left:0%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;"> 1 </p><p style="left:30%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;"> 2 </p><p style="left:63%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;"> 3 </p><p style="left:95%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;"> 4 </p><p style="left:-40%;top:45%;font-size:130%;transform:rotateZ(-90deg);position:absolute;"> линии строк </p><p style="left:-10%;top:-10%;font-size:130%;position:absolute;"> 1 </p><p style="left:-10%;top:21%;font-size:130%;position:absolute;"> 2 </p><p style="left:-10%;top:53%;font-size:130%;position:absolute;"> 3 </p><p style="left:-10%;top:85%;font-size:130%;position:absolute;"> 4 </p><div style="left:0%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:31%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:63%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:95%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:0%;top:0%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:31%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:63%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:95%;width:100%;height:5%;background:black;position:absolute;"></div></div> Чтобы контролировать количество столбцов, которые будет занимать элемент, вы можете использовать свойство <code>grid-column</code> в сочетании с номерами линий начала и конца элемента. Вот пример: <blockquote> grid-column: 1/3; </blockquote> Это приведет к тому, что элемент начнется с первой вертикальной линии грида слева и продолжится до третьей линии грида, занимая два столбца. </section>
## Instructions
<section id="instructions"> Сделать элемент с классом <code>item5</code> использовать последние два столбца сетки. </section>
<section id="instructions"> Создайте элемент с классом <code>item5</code> , который занимает последние два столбца грида. </section>
## Tests
<section id='tests'>