Css网格布局-Grid布局
Grid
概念
Grid布局是一种二维布局方法，可以在行和列中布置内容。所以在任何网格中都有两个轴，横轴（即行轴，内联）和纵轴（即列轴，块）。css
什么是网格
网格是一组相交的水平线和垂直线，它定义了网格的列和行。咱们能够将网格元素放置在与这些行和列相关的位置上git
固定或弹性的轨道的大小
- 可使用固定的轨道尺寸建立网格，好比使用像素单位。
- 也可使用好比百分比或者fr(专门为此目的建立的新单位)来建立有弹性尺寸的网格
网格容器
经过在元素上声明 display：grid 或 display：inline-grid 来建立一个网格容器。一旦咱们这样作，这个元素的全部直系子元素将成为网格元素。github
网格轨道
经过 grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。这些属性定义了网格的轨道。一个网格轨道就是网格中任意两条线之间的空间。app
fr单位
轨道可使用任何长度单位进行定义。
网格还引入了一个新的长度单位fr表明网格容器中可用空间的一等份。函数
在轨道清单中使用repeat()
有着多轨道的大型网格可以使用 repeat() 标记来重复部分或整个轨道列表。布局
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
二者等价code
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Repeat 语句能够用于重复轨道列表中的一部分。在下面的例子中我建立了一个网格：它起始轨道为20像素，接着重复了6个1fr的轨道，最后再添加了一个20像素的轨道。blog
.wrapper {
display: grid;
grid-template-columns: 20px repeat(6, 1fr) 20px;
}
隐式网格
若是在网格定义以外又放了一些东西，或者由于内容的数量而须要的更多网格轨道的时候，网格将会在隐式网格中建立行和列.
按照默认，这些轨道将自动定义尺寸，因此会根据它里面的内容改变尺寸。
也能够在隐式网格中用 grid-auto-rows 和 grid-auto-columns 属性来定义一个设置大小尺寸的轨道。get
轨道大小 和 minmax()
在设置一个显式的网格或者定义自动建立的行和列的大小的时候，咱们也许想给网格一个最小的尺寸，确保他们能扩大到容纳他里面添加的内容。
网格用minmax()函数来解决这个问题。it
网格线
当咱们定义网格时，咱们定义的是网格轨道，而不是网格线。Grid 会为咱们建立编号的网格线来让咱们来定位每个网格元素.
网格线的编号顺序取决于文章的书写模式。在从左至右书写的语言中，编号为 1 的网格线位于最左边。在从右至左书写的语言中，编号为 1 的网格线位于最右边。
跨轨道放置网格元素
使用了grid-column-start, grid-column-end, grid-row-start 和 grid-row-end 属性
网格单元
一个网格单元是在一个网格元素中最小的单位， 从概念上来说其实它和表格的一个单元格很像。
网格区域
网格元素能够向行或着列的方向扩展一个或多个单元，而且会建立一个网格区域。网格区域的形状应该是一个矩形 - 也就是说你不可能建立出一个相似于“L”形的网格区域。
网格间距
在两个网格单元之间的 网格横向间距 或 网格纵向间距 可以使用 grid-column-gap 和 grid-row-gap 属性来建立，或者直接使用两个合并的缩写形式 grid-gap。
嵌套网格
一个网格元素能够也成为一个网格容器。
CSS属性
display
- grid ：生成一个块级网格
- inline-grid ：生成一个内联网格
- subgrid ：嵌套网格
grid-template-columns
- 该属性是基于 网格列. 的维度，去定义网格线的名称和网格轨道的尺寸大小。
- 这些值表示 网格轨道(Grid Track) 大小，它们之间的空格表示网格线。
grid-template-rows
- 该属性是基于 网格行 的维度，去定义网格线的名称和网格轨道的尺寸大小。
grid-template-areas
- 该属性是 grid areas 在CSS中的特定命名.
- 经过引用 grid-area 属性指定的 网格区域(Grid Area) 名称来定义网格模板。重复网格区域的名称致使内容跨越这些单元格。一个点号（.）表明一个空的网格单元。这个语法自己可视做网格的可视化结构。
grid-template
- 用于定义 grid-template-rows ，grid-template-columns ，grid-template-areas 缩写(shorthand)属性。
grid-row-gap
- 设置行元素之间的间隙(gutter)大小
grid-column-gap
- 设置元素列之间的间隔(gutter)大小
grid-gap
- grid-row-gap 和 grid-column-gap 的缩写语
justify-items
- 沿着 行轴线(row axis) 对齐 网格项(grid items) 内的内容
- justify-items: start | end | center | stretch;
align-items
- 沿着 列轴线(column axis) 对齐 网格项(grid items) 内的内容
- align-items: start | end | center | stretch;