文章目录
  1. 1. 容器的属性
    1. 1.1. display属性
    2. 1.2. grid-template-columns和grid-template-rows属性
    3. 1.3. grid-template-areas属性
    4. 1.4. grid-template属性
    5. 1.5. grid-column-gap和grid-row-gap属性
    6. 1.6. grid-gap属性
    7. 1.7. justify-items属性
    8. 1.8. align-items属性
    9. 1.9. place-items属性
    10. 1.10. justify-content属性
    11. 1.11. align-content属性
    12. 1.12. place-content属性
    13. 1.13. grid-auto-columns 和 grid-auto-rows属性
    14. 1.14. grid-auto-flow属性
    15. 1.15. grid属性
  2. 2. grid子元素的属性
    1. 2.1. grid-column-start、grid-column-end、grid-row-start和grid-row-end属性
    2. 2.2. grid-column和grid-row属性
    3. 2.3. grid-area属性
    4. 2.4. justify-self属性
    5. 2.5. align-self属性
    6. 2.6. place-self属性
  3. 3. CanIUse:
  4. 4. grid实践

之前我们开发页面时常用的布局方法有表格(table)、浮动(float)、 定位(position)和内联块(inline-block),这些方法本质上来讲都是hacks,存留了很多需要实现的重要功能问题(例如,垂直居中)。Flexbox的出现起到一定的补救作用,但是它只可以实现简单的一维布局,并不适用于复杂的二维布局(实际上 Flexbox 和 Grid 可以一起结合使用起到最佳效果)。css grid是一个二维的网格布局系统,它能同时处理columns和rows,让我们能够更灵活的处理页面布局。

容器的属性

以下属性设置在容器上。

  • display
  • grid-template-columns
  • grid-template-rows
  • grid-template-areas
  • grid-template
  • grid-column-gap
  • grid-row-gap
  • grid-gap
  • justify-items
  • align-items
  • place-items
  • justify-content
  • align-content
  • place-content
  • grid-auto-columns
  • grid-auto-rows
  • grid-auto-flow
  • grid
display属性

定义一个grid容器。

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

grid:block-level网格
inline-grid:inline-level网格

grid-template-columns和grid-template-rows属性

定义grid里面的columns和rows。
track-size 可以是固定的长度、百分比或fr。
line-name 是grid网格的某些别名,如:first、row1-start等。
格式如下:

1
2
3
4
.container {
grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

例如:

1
2
3
4
.container {
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}

通过line-name定义:

1
2
3
4
.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];
}

网格线也有多个名称,如:

1
2
3
.container {
grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

如果有重复的网格,可以使用repeat()

1
2
3
.container {
grid-template-columns: repeat(3, 20px [col-start]);
}

等价于:

1
2
3
.container {
grid-template-columns: [col-start] 20px [col-start] 20px [col-start] 20px;
}

fr是grid引入的单位,它将grid内剩余的空间用fr来划分,如下每个项目会占据容器宽度额三分之一。

1
2
3
.container {
grid-template-columns: 1fr 1fr 1fr;
}

fr不会把 non-flexible 元素占据的空间计算在内。如下fr计算的总空间不包括50px。

1
2
3
.container {
grid-template-columns: 1fr 50px 1fr 1fr;
}
grid-template-areas属性

采用可视化的方式指定每个单元格的名称,点代表一个空的单元格。
grid-area-name :网格名称。
. :空单元格。
none :非网格布局。
格式如下:

1
2
3
4
5
.container {
grid-template-areas:
"<grid-area-name> | . | none | ..."
"...";
}

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.item-a {
grid-area: header;
}
.item-b {
grid-area: main;
}
.item-c {
grid-area: sidebar;
}
.item-d {
grid-area: footer;
}
.container {
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}

grid-template属性

它是grid-template-rowsgrid-template-columnsgrid-template-areas的简写。
none :设置三个属性的初始值。
/ :分别设置rows和columns。
格式如下:

1
2
3
.container {
grid-template: none | <grid-template-rows> / <grid-template-columns>;
}

例如合并 grid-template 的三个属性:

1
2
3
4
5
6
.container {
grid-template:
[row1-start] "header header header" 25px [row1-end]
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;
}

等价于:

1
2
3
4
5
6
7
.container {
grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
grid-template-columns: auto 50px auto;
grid-template-areas:
"header header header"
"footer footer footer";
}
grid-column-gap和grid-row-gap属性

设置columns和rows之间的间隔。
line-size :间隔大小。
格式如下:

1
2
3
4
.container {
grid-column-gap: <line-size>;
grid-row-gap: <line-size>;
}

例如:

1
2
3
4
5
6
.container {
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
grid-column-gap: 10px;
grid-row-gap: 15px;
}

grid-gap属性

grid-row-gap andgrid-column-gap属性的缩写。
格式如下:

1
2
3
.container {
grid-gap: <grid-row-gap> <grid-column-gap>;
}

例如:

1
2
3
4
5
.container {
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
grid-gap: 15px 10px;
}

如果只指定了一个值的话,则colums和rows的间隔相同。

justify-items属性

所有单元格在row方向上的对齐方式。
格式如下:

1
2
3
.container {
justify-items: start | end | center | stretch;
}

例如:

1
2
3
.container {
justify-items: start;
}

1
2
3
.container {
justify-items: end;
}

1
2
3
.container {
justify-items: center;
}

1
2
3
.container {
justify-items: stretch;
}

align-items属性

所有单元格在column方向上的对齐方式。
格式如下:

1
2
3
.container {
align-items: start | end | center | stretch;
}

例如:

1
2
3
.container {
align-items: start;
}

1
2
3
.container {
align-items: end;
}

1
2
3
.container {
align-items: center;
}

1
2
3
.container {
align-items: stretch;
}

place-items属性

align-items justify-items 的简写
格式如下:

1
2
3
.container {
place-items: <align-items> / <justify-items>;
}

如果只有一个值,则 align-items justify-items 都设置为这个值。

justify-content属性

如果所有单元格相加总的宽度小于grid容器的宽度,则用 justify-content 属性来决定对齐方式
格式如下:

1
2
3
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

例如:

1
2
3
.container {
justify-content: start;
}

1
2
3
.container {
justify-content: end;
}

1
2
3
.container {
justify-content: center;
}

1
2
3
.container {
justify-content: stretch;
}

1
2
3
.container {
justify-content: space-around;
}

1
2
3
.container {
justify-content: space-between;
}

1
2
3
.container {
justify-content: space-evenly;
}

align-content属性

如果所有单元格相加总的高度小于grid容器的高度,则用 align-content 属性来决定对齐方式
格式如下:

1
2
3
.container {
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

例如:

1
2
3
.container {
align-content: start;
}

1
2
3
.container {
align-content: end;
}

1
2
3
.container {
align-content: center;
}

1
2
3
.container {
align-content: stretch;
}

1
2
3
.container {
align-content: space-around;
}

1
2
3
.container {
align-content: space-between;
}

1
2
3
.container {
align-content: space-evenly;
}

place-content属性

align-content justify-content 属性的简写。

格式如下:

1
2
3
.container {
place-content: <align-content> <justify-content>;
}

如果只指定了一个值的话,则align-content和justify-content设置为相同的值。

grid-auto-columns 和 grid-auto-rows属性

指定以何种方式扩展grid网格。
track-size :可以是固定长度、百分比或fr
格式如下:

1
2
3
4
.container {
grid-auto-columns: <track-size> ...;
grid-auto-rows: <track-size> ...;
}

假设有如下网格:

1
2
3
4
5
6
7
8
9
10
11
12
.container {
grid-template-columns: 60px 60px;
grid-template-rows: 90px 90px
}
.item-a {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.item-b {
grid-column: 5 / 6;
grid-row: 2 / 3;
}

我们只指定了2 x 2的网格,而对于item-b需要自动扩展网格才能定位。

1
2
3
.container {
grid-auto-columns: 60px;
}

grid-auto-flow属性

如果你的grid元素没有指定位置,则grid-auto-flow属性将决定它的显示方式。
row :按行的方式排列。
column :按列的方式排列。
dense :根据网格的内容大小改变显示顺序,不推荐使用。
格式如下:

1
2
3
.container {
grid-auto-flow: row | column | row dense | column dense
}

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<section class="container">
<div class="item-a">item-a</div>
<div class="item-b">item-b</div>
<div class="item-c">item-c</div>
<div class="item-d">item-d</div>
<div class="item-e">item-e</div>
</section>
.container {
display: grid;
grid-template-columns: 60px 60px 60px 60px 60px;
grid-template-rows: 30px 30px;
grid-auto-flow: row;
}
.item-a {
grid-column: 1;
grid-row: 1 / 3;
}
.item-e {
grid-column: 5;
grid-row: 1 / 3;
}


采用column排列:

1
2
3
4
5
6
.container {
display: grid;
grid-template-columns: 60px 60px 60px 60px 60px;
grid-template-rows: 30px 30px;
grid-auto-flow: column;
}

grid属性

集合grid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columnsgrid-auto-flow的缩写
例如:

1
2
3
.container {
grid: 100px 300px / 3fr 1fr;
}

等价于

1
2
3
4
.container {
grid-template-rows: 100px 300px;
grid-template-columns: 3fr 1fr;
}

又如:

1
2
3
.container {
grid: auto-flow / 200px 1fr;
}

等价于

1
2
3
4
.container {
grid-auto-flow: row;
grid-template-columns: 200px 1fr;
}

又如:

1
2
3
.container {
grid: auto-flow dense 100px / 1fr 2fr;
}

等价于

1
2
3
4
5
.container {
grid-auto-flow: row dense;
grid-auto-rows: 100px;
grid-template-columns: 1fr 2fr;
}

又如:

1
2
3
.container {
grid: 100px 300px / auto-flow 200px;
}

等价于

1
2
3
4
5
.container {
grid-template-rows: 100px 300px;
grid-auto-flow: column;
grid-auto-columns: 200px;
}

再复杂点的:

1
2
3
4
5
.container {
grid: [row1-start] "header header header" 1fr [row1-end]
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;
}

等价于

1
2
3
4
5
6
7
.container {
grid-template-areas:
"header header header"
"footer footer footer";
grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
grid-template-columns: auto 50px auto;
}

grid子元素的属性

以下属性设置在grid子元素上。

  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end
  • grid-column
  • grid-row
  • grid-area
  • justify-self
  • align-self
  • place-self
grid-column-start、grid-column-end、grid-row-start和grid-row-end属性

这四个属性用来决定grid子元素以什么基准定位。
line :网格线的名称
span :grid子元素跨域多少网格
span :grid子元素跨域网格,以grid line为基准
auto :默认值
格式如下:

1
2
3
4
5
6
.item {
grid-column-start: <number> | <name> | span <number> | span <name> | auto
grid-column-end: <number> | <name> | span <number> | span <name> | auto
grid-row-start: <number> | <name> | span <number> | span <name> | auto
grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

例如:

1
2
3
4
5
6
.item-a {
grid-column-start: 2;
grid-column-end: five;
grid-row-start: row1-start
grid-row-end: 3
}

又如:

1
2
3
4
5
6
.item-b {
grid-column-start: 1;
grid-column-end: span col4-start;
grid-row-start: 2
grid-row-end: span 2
}

如果grid-column-end/grid-row-end没有声明,则默认占据一个网格。

grid-column和grid-row属性

分别是grid-column-start grid-column-endgrid-row-start grid-row-end的缩写。
格式如下:

1
2
3
4
.item {
grid-column: <start-line> / <end-line> | <start-line> / span <value>;
grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

例如:

1
2
3
4
.item-c {
grid-column: 3 / span 2;
grid-row: third-line / 4;
}

如果没有指定终止线,则默认占据一个网格。

grid-area属性

通过grid-template-areas定义的area来定位子元素。
格式如下:

1
2
3
.item {
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

例如:

1
2
3
.item-d {
grid-area: header
}

也可以是grid-row-start grid-column-start grid-row-end grid-column-end的缩写。

1
2
3
.item-d {
grid-area: 1 / col4-start / last-line / 6
}

justify-self属性

justify-items属性功能相同,只不过该属性作用于单个网格。
格式如下:

1
2
3
.item {
justify-self: start | end | center | stretch;
}

例如:

1
2
3
.item-a {
justify-self: start;
}

例如:

1
2
3
.item-a {
justify-self: end;
}

例如:

1
2
3
.item-a {
justify-self: center;
}

例如:

1
2
3
.item-a {
justify-self: stretch;
}

align-self属性

align-items属性功能相同,只不过该属性作用于单个网格。
格式如下:

1
2
3
.item {
align-self: start | end | center | stretch;
}

例如:

1
2
3
.item-a {
align-self: start;
}

例如:

1
2
3
.item-a {
align-self: end;
}

例如:

1
2
3
.item-a {
align-self: center;
}

例如:

1
2
3
.item-a {
align-self: stretch;
}

place-self属性

改属性用来同时设置align-selfjustify-self
auto :默认值
/ : 分别设置两个属性,如果只有一个值,则两个属性值相同。
例如:

1
2
3
.item-a {
place-self: center;
}

例如:

1
2
3
.item-a {
place-self: center stretch;
}

CanIUse:

截止当前css grid的浏览器支持情况如下:

grid实践

下面结合实际项目介绍下grid如何使用(由于目前的兼容问题,暂未考虑IE浏览器)。
PC端页面网格布局如下:

html结构大致如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<section class="login-container">
<div class="logo"></div>
<el-form>
<h3 class="title">登录 LOGIN</h3>
<el-form-item class="oa-input">
<el-input placeholder="请输入账号" />
<i class="iconfont icon-username"></i>
</el-form-item>
<el-form-item class="pwd-input">
<el-input placeholder="请输入密码" />
<i class="iconfont icon-password"></i>
</el-form-item>
<el-button type="primary">登录</el-button>
</el-form>
<p class="copy">Copyright &copy; {{ year }}</p>
</section>

定义容器的规则:

1
2
3
4
5
6
7
8
9
10
11
.login-container {
display: grid;
grid-template: 10% auto 10% / 3fr 4fr 3fr;
grid-template-areas:
"logo . ."
". form ."
". copy .";
height: 100vh;
background: $bg;
background-size: 100% 100%;
}

容器下个子元素的规则:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.logo {
grid-area: logo;
}
.login-form {
display: grid;
place-items: center;
grid-template: 28% 22% 22% 28% / auto 320px auto;
grid-template-areas:
". title ."
". oa-input ."
". pwd-input ."
". login-btn .";
grid-area: form;
place-self: center;
}
.copy {
grid-area: copy;
place-self: center;
}
.title {
grid-area: title;
}
.oa-input {
grid-area: oa-input;
}
.pwd-input {
grid-area: pwd-input;
}
.el-form-item {
align-self: stretch;
}
.el-button {
grid-area: login-btn;
}

对于移动端采用@media属性来改变网格的布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@media (max-width: 767px) {
.login-container {
grid-template: 10% auto 10% / auto;
grid-template-areas:
"logo"
"form"
"copy";
.logo {
grid-area: logo;
}
.login-form {
grid-area: form;
}
.copy {
grid-area: copy;
}
}
}

文章目录
  1. 1. 容器的属性
    1. 1.1. display属性
    2. 1.2. grid-template-columns和grid-template-rows属性
    3. 1.3. grid-template-areas属性
    4. 1.4. grid-template属性
    5. 1.5. grid-column-gap和grid-row-gap属性
    6. 1.6. grid-gap属性
    7. 1.7. justify-items属性
    8. 1.8. align-items属性
    9. 1.9. place-items属性
    10. 1.10. justify-content属性
    11. 1.11. align-content属性
    12. 1.12. place-content属性
    13. 1.13. grid-auto-columns 和 grid-auto-rows属性
    14. 1.14. grid-auto-flow属性
    15. 1.15. grid属性
  2. 2. grid子元素的属性
    1. 2.1. grid-column-start、grid-column-end、grid-row-start和grid-row-end属性
    2. 2.2. grid-column和grid-row属性
    3. 2.3. grid-area属性
    4. 2.4. justify-self属性
    5. 2.5. align-self属性
    6. 2.6. place-self属性
  3. 3. CanIUse:
  4. 4. grid实践