第八十三章 棋子入盘

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

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

<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 设置它们的堆叠顺序就行了。

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

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第八十三章 棋子入盘

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏