grid布局

Posted on

采用网格布局的区域，称为“容器（container）”。容器内部的采用网格定位的子元素称为“项目（item）”

container

1
2
3
4
.container {
    /* 指定一个容器为 */ 
   display: grid | inline-grid;    
}

columns row

1
2
3
4
.container {
    grid-template-columns: 40px 50px auto 50px 40px;
    grid-template-rows: 25% 100px auto;
}
Snipaste_2021-07-10_23-02-04
1
2
grid-template-columns: repeat(4,1fr); // 宽度平均分成四等份 
grid-template-columns: 1fr 2fr 3fr;   // 列宽这样是分成6份各占 1 2 3 份

grid-template-areas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  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";
}
Snipaste_2021-08-20_12-33-29

gap

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

.container {
    grid-gap: <grid-row-gap> <grid-column-gap>;
}
Snipaste_2021-08-20_13-02-30

item

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;
}
Snipaste_2021-08-20_13-18-20
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;
}
Snipaste_2021-08-20_13-33-02
1
2
3
4
.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}
Snipaste_2021-08-20_13-23-08

grid 游戏

参照 A Complete Guide to Grid