网格容器
- 通过在元素上声明
display:grid或display: inline-grid来创建一个网格容器，设定后该元素的所有直系子元素将成为网格元素
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
</div>
.wrapper {
display: grid;
}
复制代码
网格轨道
- 我们通过
grid-template-columns和grid-template-rows属性来定义网格中的列和行；一个网格轨道就是网格中任意两条线之间的空间。 grid-template-columns: 定义网格中的列grid-template-rows: 定义网格中行
fr单位
- 网格引入了新的长度单位
fr; fr单位代表网格容器中可用空间的一部分，轨道会随着可用空间增长和收缩。
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
</div>
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
复制代码
使用repeat()
- 有着多轨道的大型网格可使用
repeat() 标记来重复部分或整个轨道列表
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
//也可写成
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
复制代码
//起始轨道为100像素，接着重复了4个1fr的轨道，最后再添加了一个100像素的轨道
.wraper {
display: grid;
grid-template-columns: 100px repeat(4, 1fr) 100px;
}
复制代码
repeat语句可以传入一个轨道列表，因此你可以用它来创建一个多轨道模式的重复轨道列表。
//网格将有共计10个轨道，为1个1fr轨道后面跟着1个2fr轨道，该模式重复5次。
.wrapper {
display: grid;
grid-template-columns: repeat(5,1fr,2fr);
}
复制代码
隐式和显式网格
- 使用
grid-template-columns和grid-template-rows属于定义的是显示网格的行和列； - 如果你在网格定义之外又放了一些东西，或者因为内容的数量而需要的更多网格轨道的时候，网格将会在隐式网格中创建行和列。按照默认，这些轨道将自动定义尺寸，所以会根据它里面的内容改变尺寸。
- 在隐式网格中用 grid-auto-rows 和 grid-auto-columns 属性来定义一个设置大小尺寸的轨道。
//用 grid-auto-rows 属性来确保在隐式网格中创建的轨道是200像素高
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
}
复制代码
//轨道高250px
.wrapper {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(4, 250px); //优先级更高
grid-auto-rows: 200px;
}
复制代码
轨道大小和minmax()
- 用minmax()函数可以给网格一个最小的尺寸，确保他们能扩大到容纳他里面添加的内容，同时也不限定死最大高度，网格可以随着内容延伸。
//自动创建的行高将会是最小100像素，最大为auto。用auto意味着行的尺寸将会根据内容的大小来自动变换：根据本行中最高的单元，把空间扩展到足够容纳该单元。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px,auto);
}
复制代码
网格线
- 当我们定义网格时，我们定义的是网格轨道，而不是网格线；grid会为我们创建编号的网格线来让我们定位每一个网格元素，例如下面这个三列两行网格中就拥有四条纵向的网格线
- 网格线的编号顺序取决于文章的书写模式，在从左至右书写的语言中，编号为 1 的网格线位于最左边。
跨轨道放置网格元素
grid-column-start: 网格列线开始编号grid-column-end: 网格列线结束编号grid-row-start: 网格行线开始编号grid-row-end: 网格行线结束编号
网格单元
- 一个网格单元是在一个网格元素中最小的单位， 从概念上来讲其实它和表格的一个单元格很像
网格区域
- 网格元素可以向行或者列的方向扩展一个或多个单元，并且会创建一个网格区域；网格区域的形状应该是一个矩形，也就是说你不可能创建出一个类似于“L”形的网格区域
网格间距
- 在两个网格单元之间的 网格横向间距 或 网格纵向间距 可使用
grid-column-gap和grid-row-gap属性来创建; - 间距只出现在网格轨道与轨道之间，它们并不会出现在网格容器的四周;
- 间距使用的空间会在 使用弹性长度fr的轨道的空间计算前就被留出来，间距的尺寸定义行为和普通轨道一致，但不同的是你不能向其中插入任何内容。从以基线定位的角度来说，间距就像一条很宽的基线。
网格间距缩写
- 这两个属性可以用grid-gap简写。如果你只给出一个值，那这个值会同时应用于行间距和列间距。如果你给了两个值，第一个会被用于grid-row-gap，第二个则会被用于grid-column-gap
grid-gap: 10px 20px:先是行间距后是列间距
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 1em 20px;
}
复制代码
嵌套网格
- 一个网格元素可以也成为一个网格容器，嵌套网格和他的父级并没有关系
- 当元素不是网格容器的直接子级元素时，它们不会参与到网格布局中，并显示为正常的文档流
使用z-index控制层级
- 多个网格项目可以占用同一个网格单位，使用
z-index属性控制重叠的顺序,z-index越大层级越高
网格布局结合弹性布局
- 当抉择该用网格还是弹性盒时，你可以问自己一个简单的问题
- 我只需要按行或者列控制布局？那就用弹性盒子
- 我需要同时按行和列控制布局？那就用网格
