grid布局

发表于

一、什么是Grid布局

Grid布局和Flex布局最大的不同点在与：Grid是二维网格布局系统，Flex是一维布局。

1
2
3
.grid {
  display: grid;
}

行内元素也可使用grid布局。

1
2
3
.grid {
  display: inline-grid;
}

二、基本概念

网格容器：元素应用display:grid，它是其所有网格项的父元素。

网格项：网格容器的子元素。

网格线：网格线组成网格。

网格轨道：相邻量网格线间的空间，就像表格中的行和列。

网格单元格：网格中的最小单位，就像表格中的单元格。

网格区域：由多格网格单元格组成。

三、基本属性

1、display
1
2
3
4
5
6
7
8
9
.container{
  display: grid | inline-grid | subgrid;
}
·grid: 生成块级网格
·inline-grid: 生成行内网格
·subgrid: 如果网格容器本身是网格项（嵌套网格容器），此属性用来继承其父网格容器的列、行大小。
注意：column，float，clear 与 vertical-align 在栅格容器上无效
2、grid-template-

grid-template-columns：设置每一列的宽度和名称。

grid-template-rows：设置每一行的高度和名称。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.container{
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}
注：宽度和高度的设置可以为百分比、px还有fr，例：
.container{
  grid-template-columns: 1fr 1fr 1fr;   (每个项目为栅格容器的1/3)
}
或
.container{
  grid-template-columns: 1fr 50px 1fr 1fr; (fr分割的区域不包括50px)
}
.container{
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}
注：每一行或列的名称可以有多个，用空格分割。