CSS网格

CSS样式请在这里查看：链接入口

CSS网格

CSS网格布局提供了带有行和列的基于网格的布局系统，可以让网页设计变得更加容易，而且不需要使用浮动和定位。

网格元素

网格布局通常由一个父级元素和多个子级元素组成，通常的形式为：

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

display 属性

当HTML元素的display 属性被设置为grid 或者inline-grid 时，它就会成为网格容器。

.grid-container:{
    display:grid;/*或者设置为inline-grid*/
}

grid 是块级网格元素，设置为inline-grid 会成为行内网格元素。一个不同是会不会延伸至整个行。

网格容器的所有直接子元素将自动转化为网格项目。

间隙

• 网格列： 网格项的垂直线被称为列。
• 网格行： 网格项的水平线被称为行。
• 网格间隙： 每列或者行之间的间隔被称为间隙。
  • 可以通过这些属性之一来调整间隙大小：
    • grid-column-gap
    • grid-row-gap
    • grid-gap

举个栗子：

grid-column-gap

.grid-container {
  	display: grid;
  	grid-column-gap: 50px;
    background-color:black;
    color:cyan;
    grid-template-columns: auto auto auto;
    text-align:center;
}
.grid-item{
    border:2px inset tomato;
}

1

2

3

4

5

6

7

8

9

grid-row-gap

.grid-container {
  	display: grid;
  	grid-row-gap: 50px;
    background-color:black;
    color:cyan;
    grid-template-columns: auto auto auto;
    text-align:center;
}
.grid-item{
    border:2px inset tomato;
}

1

2

3

4

5

6

7

8

9

grid-gap （是上面两个属性的简写属性）

.grid-container {
  	display: grid;
  	grid-gap: 50px 60px;
    background-color:black;
    color:cyan;
    grid-template-columns: auto auto auto;
    text-align:center;
}
.grid-item{
    border:2px inset tomato;
}

1

2

3

4

5

6

7

8

9

如果只设置一个值，则表示将两个简写都设置为这个值：

grid-gap:50px;

1

2

3

4

5

6

7

8

9

网格行

列之间的线称为列线

行之间的线称为行线

当放置网格项目时，可以引用行号：

比如说放在列线1和列线3之间：

.item1{
    grid-column-start:1;
    grid-column-end:3;
}

1

2

3

4

5

6

7

8

9

比如说放在行线1到行线4之间：

.item1{
    grid-row-start:1;
    grid-row-end:4;
}

1

2

3

4

5

6

7

8

9

grid-template-columns

grid-template-columns 属性定义网格布局中的列数，并且可以定义每列的宽度。

希望定义几列，可以设置几个宽度值，如果希望每列宽度都相同，可以都设置为auto。

grid-template-columns: 100px 150px 200px 250px;

1

2

3

4

5

6

7

8

9

如果有多于列数个网格项目，会自动创建新行。

grid-template-rows

与上个属性用法相同。

grid-template-rows: 100px 250px;
grid-template-columns:auto auto auto;

1

2

3

4

5

6

7

8

9

justify-content

justify-content属性用于在容器内对齐整个网格。

只有在网格总宽度小于容器宽度才有效。

原型：

1

2

3

4

5

6

7

8

9

space-evenly :

1

2

3

4

5

6

7

8

9

在列之间以及列周围留出相等的空间。

space-around :

1

2

3

4

5

6

7

8

9

在列周围留出相等的空间

space-between :

1

2

3

4

5

6

7

8

9

在列之间留出相等的空间

center :

1

2

3

4

5

6

7

8

9

在容器中间对齐网格

start :

1

2

3

4

5

6

7

8

9

在容器开头对齐网格

end :

1

2

3

4

5

6

7

8

9

在容器末端对齐网格

align-content

align-content属性用于垂直对齐容器内的整个网格

网格的总高度要小于容器高才能生效。

center :

1

2

3

4

5

6

7

8

9

space-evenly :

1

2

3

4

5

6

7

8

9

space-around :

1

2

3

4

5

6

7

8

9

space-between :

1

2

3

4

5

6

7

8

9

start :

1

2

3

4

5

6

7

8

9

end :

1

2

3

4

5

6

7

8

9

子元素（项目）

网格容器包含项目，默认情况下，网格容器的每一列的，每一行都有一个网格项目。

grid-column

grid-column 属性定义将项目放在哪一列上。

可以定义开始和结束位置。是grid-column-start 和 grid-column-end 两个属性的简写属性。

.item1{
    grid-column:2/4;
}

1

2

3

4

5

6

7

8

9

grid-row

用法同grid-column

.item1{
    grid-row:2/4;
}

1

2

3

4

5

6

7

8

9

也可以引用关键字span

.item1 {
  grid-row: 2 / span 3;
}

这个例子表示从第二行开始，跨过3行。

1

2

3

4

5

6

7

8

9

grid-area

grid-area 属性是 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性。

.item1 {
  grid-area: 2 / 2 / 3 / 4;
}

上例表示在二行二列开始到三行四列结束：

1

2

3

4

5

6

7

8

9

也可以使用关键字span

.item1 {
  grid-area: 2 / 2 /span 3 /span 4;
}

表示在二行二列开始，跨过三行四列：

1

2

3

4

5

6

7

8

9

命名网格项目

grid-area 属性也可以用于为网格项目分配名称。

然后使用网格容器的grid-template-areas 属性来引用网格项目。

.item1 {
  grid-area: a1;
}
.grid-container {
  grid-template-areas: 'a1 a1 a1 a1 a1';
}

item1 的名称是 “myArea”，并跨越五列网格布局中的所有五列；

1

2

3

4

5

6

7

8

9

每一行由符号’ ' 来表示定义，句号用来表示没有名称的网格项目。

.item1 {
  grid-area: a1;
}
.grid-container {
  grid-template-areas: 'a1 a1 a1 . .';
}

1

2

3

4

5

6

7

8

9

可以定义多行：

.item1{
    grid-area:a1;
}
.item2{
    grid-area:a2;
}
.grid-container {
  grid-template-areas: 'a2 a2 a2 . .' 'a2 a2 a2 a1 a1';
} 

1

2

3

4

5

6

7

8

9

为所有项目命名之后便可以创作一张可用的模板：

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
} 

header

menu

main

right

footer

项目的顺序

为每个.item 类设置grid-area 属性值可以自定义每个网格项目的顺序。

也可以使用媒体查询为不同的屏幕尺寸设置不同的排列方式。

  .item1 { grid-area: 1 / span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 4 / 2; }
  .item6 { grid-area: 2 / 3 / 3 / 4; }

1

2

3

4

5

6