Updated grammar and consistency of terms. (#30668)
This commit is contained in:
committed by
Jingyi Ding
parent
033606ec8d
commit
6a304ef9bb
@ -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>这将使项目从左侧网格的第一条垂直线开始,并跨越网格的第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-column:1/3; </blockquote>这将会让使项目从左侧第一条网格垂直线开始,一直延伸到网格的第3条线,占据两个网格列。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用类<code>item5</code>使项目消耗网格的最后两列。 </section>
|
||||
<section id="instructions">使用<code>item5</code>class使项目占据网络格的最后两列。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
Reference in New Issue
Block a user