grid布局基本概念

网格容器

• 经过在元素上声明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);
}

复制代码

• repeat语句能够用于重复轨道列表中的一部分

//起始轨道为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越大层级越高

网格布局结合弹性布局

• 当抉择该用网格仍是弹性盒时，你能够问本身一个简单的问题
  • 我只须要按行或者列控制布局？那就用弹性盒子
  • 我须要同时按行和列控制布局？那就用网格