Grid Container 属性

  • display
  • grid-template-columns
  • grid-template-rows
  • grid-template-areas
  • grid-template： <grid-template-rows> / <grid-template-columns>
  • grid-column-gap
  • grid-row-gap
  • grid-gap
  • justify-items： start | end | center | stretch;
  • align-items： start | end | center | stretch;
  • place-items： <align-items> <justify-items>
  • justify-content：start | end | center | stretch | space-around | space-between | space-evenly;
  • align-content：start | end | center | stretch | space-around | space-between | space-evenly;
  • place-content：<align-content> <justify-content>
  • grid-auto-columns
  • grid-auto-rows
  • grid-auto-flow
  • grid

Grid Items 属性

  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end
  • grid-column
  • grid-row
  • grid-area
  • justify-self
  • align-self
  • place-self

页面布局

1
2
3
4
5
6
7
<div class="Container">
	<div class="item item-a">header a</div>
	<div class="item item-b">main b</div>
	<div class="item item-c">sidebar c</div>
	<div class="item item-d">footer d</div>
	<div class="item item-e">隐式 e</div>
</div>
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
35
36
37
38
39
40
41
42
43
.Container {
  display: grid;
  height:20rem;
  
  /* 3*4的网格 */	
  grid-template-columns: 1fr 20% 1fr 1fr;
  grid-template-rows: 25% auto 100px;
	
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";

  /* 网格间距，等价于 grid-gap: 10px 10px; 等价于 grid-gap: 10px;*/
  grid-column-gap: 10px;
  grid-row-gap: 10px;

  /* 指定隐式轨道的大小 */
  grid-auto-columns: 60px;
  grid-auto-rows: 60px;
}
.item{ line-height:2.5rem; text-indent:.5rem; border:5px solid #cdcdcd;}
.item-a {
  grid-area: header;
  background:moccasin;
}
.item-b {
  height:3rem;
  grid-area: main;
  background:mediumspringgreen;
}
.item-c {
  grid-area: sidebar;
  background:wheat;
}
.item-d {
  grid-area: footer;
  background:salmon;
}
.item-e {
  grid-column: 7 /  span 2;
  grid-row: 3 / 4;
}

效果

header a
main b
sidebar c
footer d
隐式 e

网格图解

网格图解

grid-template

  • 可以给网格线命名

    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];

  • 同一个网格线，可以存在多个命名

    grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];

  • 重复值，可以使用 repeat() 来简化定义，如下定义等价

    grid-template-columns: repeat(3, 20px [col-start]);
    等价于
    grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];

  • fr 均分网格容器剩余空间

    grid-template-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 50px 1fr 1fr;

示例 Container 缩写

1
2
3
4
5
6
7
8
9
10
.Box{
  display:grid;
  height:20rem;
	
  grid:	"header header header header"   25%
    	"main main . sidebar"           auto
    	"footer footer footer footer"   100px
        / 1fr 20% 1fr 1fr;
  grid-gap: 10px;
}
header a
main b
sidebar c
footer d
隐式 e

参考资料

完全指南