Updated grammar and consistency of terms. (#30668)

This commit is contained in:
Picklebunker
2019-05-08 01:46:37 -04:00
committed by Jingyi Ding
parent 033606ec8d
commit 6a304ef9bb

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-column1/3; </blockquote>这将使项目从左侧网格的第一条垂直线开始,并跨越网格的第3条线消耗两列。 </section>
<section id="description">到目前为止,所讨论的所有属性都是针对网格容器的。 <code>grid-column</code>属性是第一个用于网格项本身的属性。网格的水平线和垂直线称为<dfn>line</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-column1/3; </blockquote>这将会让使项目从左侧第一条网格垂直线开始,一直延伸到网格的第3条线占据两个网格列。 </section>
## Instructions
<section id="instructions">使用<code>item5</code>使项目消耗网格的最后两列。 </section>
<section id="instructions">使用<code>item5</code>class使项目占据网络格的最后两列。 </section>
## Tests
<section id='tests'>