CSS3 Grid Layout是一个新的模块，主要适用于进行二维的表格布局，用来优化用户界面设计，使用网格容器将子元素灵活地插入到布局中去。

容器与子元素

属性:

  • diaplay:grid; 设置容器
  • grid-gap:网格间距

Grid布局的核心要素就是容器和子元素了，容器实际上就是网格，而子元素就是其中的每一个小格子。

先写一个最简单的网格

1
2
3
4
5
6
7
8
9
<div class="gridbox">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
</div>
1
2
3
4
.gridbox{
    display: grid; 
    grid-gap:1px;
}

使用grid布局必须把容器的display属性设置为grid。没有定义子元素该在网格中如何放置，默认每个子元素独占一行。

行与列

属性:

  • grid-template-columns:网格列宽度
  • grid-template-rows:网格行的高度

Grid 布局中使用grid-template-columns和grid-template-rows来设置行与列的大小。

1
2
3
4
5
6
7
8
<div class="gridbox">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
</div>

设置值的数量和大小分别代表网页行列的数量和格子的宽高。

1
2
3
4
5
6
.gridbox{
    display: grid;
    grid-gap: 1px;
    grid-template-columns:100px 100px 100px;
    grid-template-rows:100px 100px;
}

网格布局中还可以使用一个新的单位fr，它用于计算并分配剩余的空间。现在将上面的单位改成fr

1
2
3
4
5
6
.gridbox{
    display: grid;
    grid-gap: 1px;
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:1fr 1fr;
}

横向纵向都按照比例分配，横向会占满所有未分配的空间，而纵向则是恰好包裹内容。

固定的大小和fr结合使用会怎么样呢?

1
2
3
4
5
6
.gridbox{
    display: grid;
    grid-gap: 1px;
    grid-template-columns:100px 1fr 1fr;
    grid-template-rows:100px 1fr;
}

第一个格子是固定大小的，其他格子依旧按照剩余空间分配。

grid-template-columns:1fr 1fr 1fr;可以使用简洁写法grid-template-columns:repeat(3,1fr);

跨行与跨列

属性：

  • grid-column-start ：跨列起始网格线
  • grid-column-end ：跨列终点网格线
  • grid-row-start ：跨行起始网格线
  • grid-row-end ：跨行终点网格线
1
2
3
4
5
6
7
8
<div class="gridbox">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
</div>

在容器中定义好每行和每列的大小。然后再子元素中使用grid-column-start和grid-column-end来确定该元素跨越的网格的起始和终点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.gridbox{
            display: grid; 
            grid-gap: 1px;
            grid-template-columns:100px 100px 100px;
            grid-template-rows:100px 100px 100px;
        }

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

        .item3{
            grid-row-start:2;
            grid-row-end:4;
        }
        
        .item6{
            grid-column-start:2;
            grid-column-end:4;
        }

grid-column-start:2;grid-column-end:4;可以简写为grid-column: 2 / 4;
同理，grid-row-start:2;grid-row-end:4;可以简写为grid-row: 2 / 4;

自动对齐

属性:

  • grid-auto-flow:自动对齐(row/column)
1
2
3
4
5
6
7
8
9
<div class="gridbox">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
</div>

当grid-auto-flow设置为column时,子元素会自动向列对齐,网格子元素会依次竖向摆放。

1
2
3
4
5
6
.gridbox{
    display: grid; 
    grid-gap: 1px;
    grid-auto-flow: column;
    grid-template-rows: 50px 100px;
}

同样的,当grid-auto-flow设置为row时,子元素会自动向行对齐,网格子元素会依次横向摆放。

1
2
3
4
5
6
.gridbox{
    display: grid; 
    grid-gap: 1px;
    grid-auto-flow: row;
    grid-template-columns: 100px 100px 100px;
}

grid与grid-area

属性:

  • grid:用于将grid-template-column和grid-template-row结合并且用更直观的方式展示
  • grid-area:用于为每一块子元素命名

CSS grid 布局中还有一个用于容器的超级属性grid,以及另一个用于子元素的属性grid-area.

1
2
3
4
5
6
7
8
9
<div class="gridbox">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
</div>

grid属性分为两个部分用”/“隔开,前一部分设置网格行的分布和高度,“one one one” 200px及这一行由one独占三个网格,并且改行高度为200px.而后一部分则设置网格列的宽度.1fr 1fr 1fr表示网格列宽比例相等.

grid-area设置了每一个子元素的命名,在grid属性中中使用到的命名都必须由该属性定义.

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
.gridbox{
    display: grid; 
    grid-gap: 1px;
   grid:"one one one" 150px
         "two three four" 100px
         "five six seven" 50px
         / 1fr 1fr 1fr
}

.item1{
    grid-area: one;
}

.item2{
    grid-area: two;
}

.item3{
    grid-area: three;
}

.item4{
    grid-area: four;
}

.item5{
    grid-area: five;
}

.item6{
    grid-area: six;
}

.item7{
    grid-area: seven;
}