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

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


<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;
}
1
2
3
4
5
6
7

啊,老鼠手快(手不快就被老猫叼走了),已经把子元素放里面了,挺整齐的!

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

好,我们想摆在那里就摆在哪里,想占用多大就占用多大!


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

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

【本章助记卡片:卡片 for 第八十三章