css grid学习笔记_grid-template-columns repeat

一、父级属性

1、display:grid;

2、display: inline-grid;

3、grid-template-columns

grid-template-columns:100px 200px 300px; 
1

三列，宽度分别是100px 200px 300px

4、grid-template-rows

grid-template-rows:100px 200px 300px; 
1

三行，宽度分别是100px 200px 300px

5、 repeat方法

grid-template-columns: repeat(3, 200px);
1

repeat是用来简写的，表示重复三次，及三列宽度都是200px

6、auto-fill关键字

grid-template-columns: repeat(auto-fill, 100px);
1

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

7、fr关键字

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

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

8、minmax()

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

grid-template-columns: 1fr 1fr minmax(100px, 1fr);
1

minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。

9、auto

grid-template-columns: 100px auto 100px;
1

10、网格线名称

grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
1
2
3
4
5

上面代码指定网格布局为3行 x 3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。

网格布局允许同一根线有多个名字，比如[fifth-line row-5]。

11、间距 grid-grap grid-column-grap grid-column-grap

.container {
  grid-row-gap: 10px;
  grid-column-gap: 20px;
}

1
2
3
4
5

12、单元格名称 grid-template-areas

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}
1
2
3
4
5
6
7
8

配合grid-area使用

.item-1 {
  grid-area: e;
}
1
2
3

13、grid-auto-flow单元格顺序,可以实现避免空格

这个顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。

grid-auto-flow: column dense;
1

14、单元格对齐效果 justify-items 属性，align-items 属性，place-items 属性

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch(默认，拉伸占满单元格);
}
1
2
3
4

place-items是align-items和justify-items的简写

place-items: <align-items> <justify-items>;
1

15、整个网格对齐效果

justify-content 属性，
align-content 属性，
place-content 属性

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

16、超出网格大小的单元格布局 grid-auto-columns 属性，grid-auto-rows 属性

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px; 
}
1
2
3
4
5
6

17、简写：grid-template 属性，grid 属性

不推荐使用简写过于复杂
grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

二、子级

1、单元格位置grid-column-start 属性，grid-column-end 属性，grid-row-start 属性，grid-row-end 属性

grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线
1
2
3
4

.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}
1
2
3
4

2、grid-column grid-rows是一种简写的方式

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

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
1
2
3
4
5
6
7
8
9
10
11

3、span关键字,表示跨域多少个单元格

.item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}
1
2
3
4
5
6
7
8
9
10
11

4、grid-area 属性

grid-area属性指定项目放在哪一个区域。

.item-1 {
  grid-area: e;
}
1
2
3

grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。

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

5、单个单元格对齐方式 justify-self 属性，align-self 属性，place-self 属性

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

示例

1、grid-template-areas实现放置指定区域

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .wrap{
      width: 300px;
      height: 300px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 1px;
       grid-template-areas: 'a b c'
                     'd e f'
                     'g h i';
    }
    .wrap div{
      background: pink;
    }
    .wrap .box1{
      grid-area:  i;
      background: green;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div>1</div>
    <div class="box1">2</div>
    <div>3</div>
    <div>4</div>
    <div class="box2">5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
</body>
</html>
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

2、grid-column:span 2;实现横向占两行

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .wrap{
      width: 300px;
      height: 300px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 1px;
    }
    .wrap div{
      background: pink;
    }
    .wrap .box1{
      background: green;
      grid-column: span 2;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div>1</div>
    <div class="box1">2</div>
    <div>3</div>
    <div>4</div>
    <div class="box2">5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
</body>
</html>

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

3、grid-row:span 2;实现纵向占两行

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .wrap{
      width: 300px;
      height: 300px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 1px;
    }
    .wrap div{
      background: pink;
    }
    .wrap .box1{
      background: green;
      grid-row: span 2;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div>1</div>
    <div class="box1">2</div>
    <div>3</div>
    <div>4</div>
    <div class="box2">5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
</body>
</html>

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

4、实现横向占用2行，纵向占用4行

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .wrap{
      width: 300px;
      height: 300px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 1px;
    }
    .wrap div{
      background: pink;
    }
    .wrap .box1{
      background: green;
      grid-row: span 4;
      grid-column: span 2;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div>1</div>
    <div class="box1">2</div>
    <div>3</div>
    <div>4</div>
    <div class="box2">5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
</body>
</html>
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

5、指定每个网格固定大小

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .wrap{
      display: grid;
      grid-template-columns: 100px 100px 200px;
      grid-template-rows: 100px 100px 200px;
      grid-gap: 1px;
    }
    .wrap div{
      background: pink;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div>1</div>
    <div class="box1">2</div>
    <div>3</div>
    <div>4</div>
    <div class="box2">5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
</body>
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