第八十三章 棋子入盘

棋盘已经画好，只要摆上棋子，老夫就以这天地为棋局，与你对弈个天昏地暗！（老鼠忽然中二病发作，快，快灌他喝咖啡~

我们现在画出了网格，把子元素摆在里面就行了。问题是：每一个子元素放在哪里？

<div class="grid-box"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div><div class="grid-item">7</div></div>

.grid-box {display: grid;grid-template-columns: 1fr 1fr 1fr;}.grid-item {min-height: 100px;background: #DEDEDE;border: 2px solid white;}

1234567

啊，老鼠手快（手不快就被老猫叼走了），已经把子元素放里面了，挺整齐的！

就这么简单，当然，有些时候我们希望结果不是如此单调乏味，我们要错落。错落什么意思呢，就是一个元素可能占用不止一个网格单元格。或者并不是按照顺序这么摆放。

好，我们想摆在那里就摆在哪里，想占用多大就占用多大！

<div class="grid-box"><div class="grid-item"></div></div>

.grid-box {display: grid;min-height: 300px;border: 2px solid #DEDEDE;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr;}.grid-item {min-height: 100px;grid-column-start: 2;grid-row-start: 2;background: #DEDEDE;border: 2px solid white;}

grid-column-start: 2; 和 grid-row-start: 2; 这是定义列的起始和行的起始。但是说的并不是放在第二个单元格里，而是说子元素占用的范围从第二根网格线开始（横向纵向都是，我建议大家把网格分的稍微多一点，我这里是限于面积，以及为了让你们能够明确识别）。

这么说不太直观？那么我们想想，是不是有起始就意味着有结束，如果我们把结束也定义上的话，是不是相当于把子元素占用的范围给限定了。试试不要钱哦~

<div class="grid-box"><div class="grid-item"></div></div>

.grid-box {display: grid;min-height: 300px;border: 2px solid #DEDEDE;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr;}.grid-item {min-height: 100px;grid-column-start: 1;grid-column-end: 3;grid-row-start: 2;grid-row-end: 4;background: #DEDEDE;border: 2px solid white;}

这样就该明白了吧，还不明白就反复假设，反复验证，反正也就修改一下数字，刷新页面对照结果的事情。这都懒得做，我就拿你没办法了。

要注意的是，网格线不单单是我们在中间画的线哦，想要形成间隔，两侧也是有线的，上下也是有线的。只是当前，这四根线和父元素的边界重叠在了一起。

然后这里我们要接受一下简写：

.grid-item {min-height: 100px;grid-column: 1 / 3;grid-row: 2 / 4;background: #DEDEDE;border: 2px solid white;}

和上面等效的，这样简单一点。

我知道，你想说，网格画的多一点数线数的头晕。其实网格线可以取名字的，只是怕你们搞混乱，所以上一章没有说：

<div class="grid-box"><div class="grid-item"></div></div>

.grid-box {display: grid;min-height: 300px;border: 2px solid #DEDEDE;grid-template-columns: [first-start] 1fr [first-end second-start] 1fr [second-end third-start] 1fr [third-end];grid-template-rows: 1fr 1fr 1fr;}.grid-item {min-height: 100px;grid-column-start: second-start;grid-column-end: third-end;grid-row-start: 2;grid-row-end: 4;background: #DEDEDE;border: 2px solid white;}

我们在定义网格的时候写的是间隔的距离（轨道宽度）。现在在两个间隔之间用 [] 表示网格线，里面是网格线的名字，一根网格线可以有多个名字，名字之间用空格分隔。当然，我们并不需要为每一根网格线命名，只在必要的时候命名就可以了。

对于网格线的定义，前面所说的各种方法都可以混用，还有一些没说到的……就很热闹。建议先把我讲到的都弄懂了用熟练了，再去看文档进行延伸。

但是，我们有时候就需要这个元素从某个网格线开始，然后横向跨越多个轨道，我们再去找到达哪个线很麻烦，我能不能直接这样描述呢？span 2 表达的就是这个意思。

<div class="grid-box"><div class="grid-item"></div></div>

.grid-box {display: grid;min-height: 300px;border: 2px solid #DEDEDE;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr;}.grid-item {min-height: 100px;grid-column-start: 1;grid-column-end: span 1;grid-row-start: 2;grid-row-end: span 2;background: #DEDEDE;border: 2px solid white;}

差不多就是这样，也可以写成 span second-end 表示跨越到 second-end 这根网格线。

先掌握一个方法用熟练了再扩展哦，否则就乱了。

还有，子元素之间可以重叠，用 z-index 设置它们的堆叠顺序就行了。

这一章就先到这里吧，一次吃太多容易不消化的（就不承认是自己懒！