棋盘已经画好,只要摆上棋子,老夫就以这天地为棋局,与你对弈个天昏地暗!(老鼠忽然中二病发作,快,快灌他喝咖啡~
我们现在画出了网格,把子元素摆在里面就行了。问题是:每一个子元素放在哪里?
<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
设置它们的堆叠顺序就行了。
这一章就先到这里吧,一次吃太多容易不消化的(就不承认是自己懒!
暂无评论内容