ZhangYang's Blog

栅格系统(CSS grid)

发表于 | 分类于

栅格是由网格演变而来的另一种说法，都是一个意思——格子,栅格有了规则，也就形成了我们所说的栅格系统

CSS栅格元素

  • container(容器)
  • rows(行数)
  • columns(列数)
  • gutters (列间隙)

image

容器(container)

  • 容器的目的是设置栅格系统的总宽度
  • width是以100%的形式从父容器中继承而来的
  • 通常设置max-width来控制最大宽度
1
2
3
4
.grid-container {
 width : 100%;
 max-width : 1200px; 
}

image

行元素(rows)

  • 将Column元素放置于Row元素里面，用来避免Column元素溢出到其它行
  • 为了实现这一效果,使用clearfix来清除浮动
1
2
3
4
5
6
.row:before, 
.row:after {
 content:"";
 display: table ;
 clear:both;
}

image

列元素(columns)

  • 列元素是栅格系统中最复杂的部分
  • 首先，在CSS中会有很多种不同的定位方式，并且我们需要考虑不同类型列的宽度，以及设计响应式

image

列的定位(Column Positioning)

  • 每一列设置float定位
  • Column元素是一个空元素的话，那么它就会浮动到顶部。为了防止这种情况的发生，我们给每个Column元素设置了浮动的同时也设置了1px的最小高度
1
2
3
4
[class*='col-'] {
 float: left;
 min-height: 1px; 
}

列宽度的设置(Column Widths)

  • 获取每一列的宽度，用容器的总宽度去除列数,容器宽度是100%，并且需要6列，所以100/6=16.66，最后算出来每一列的宽度就是16.16%
1
2
3
4
5
[class*='col-'] {
 float: left;
 min-height: 1px; 
 width: 16.66%; 
}

多列列宽的设置

  • 使用的元素的列之和必须为6(即符合你设定的列之和)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.col-1{
 width: 16.66%; 
}
.col-2{
 width: 33.33%; 
}
.col-3{
 width: 50%; 
}
.col-4{
 width: 66.664%;
}
.col-5{
 width: 83.33%;
}
.col-6{
 width: 100%;
}

列间隙(Column Gutters)

  • 通过border-box模型设置列间隙
1
2
3
4
5
6
7
8
9
10
.grid-container *{
 box-sizing: border-box; 
}
[class*='col-'] {
 float: left;
 min-height: 1px; 
 width: 16.66%; 
 /*-- our gutter --*/
 padding: 12px;
}

image

基本栅格布局

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 设置容器宽度100%,最大宽度限制1200px */
    .grid-container {
     width: 100%; 
    }
    /* 每一行清除浮动 */
    .row:after {
     content:"";
     display: table ;
     clear:both;
    }
    /* 每一列宽度设置为100%/列数 */
    [class*='col-'] {
     float: left; 
     min-height: 1px; 
     width: 16.66%; 
     /*-- our gutter -- */
     padding: 12px; 
     background-color: #FFDCDC;
    }
    /* 多列宽度设置 */
    .col-1{ width: 16.66%; }
    .col-2{ width: 33.33%; }
    .col-3{ width: 50%; }
    .col-4{ width: 66.66%; }
    .col-5{ width: 83.33%; }
    .col-6{ width: 100%; }
    .grid-container, .row, [class*='col-'] {
      box-sizing: border-box;
      border: 1px solid red;
    }
    [class*='col-'] > p {
     background-color: #FFC2C2; 
     padding: 0;
     margin: 0;
     text-align: center; 
     color: white; 
    }
  </style>
</head>
<body>
  <div class="grid-container">
   <div class="row">
   <div class="col-1"><p>col-1</p></div> 
   <div class="col-1"><p>col-1</p></div> 
   <div class="col-1"><p>col-1</p></div> 
   <div class="col-1"><p>col-1</p></div> 
   <div class="col-1"><p>col-1</p></div> 
   <div class="col-1"><p>col-1</p></div> 
   </div> 
   <div class="row">
   <div class="col-2"><p>col-2</p></div> 
   <div class="col-2"><p>col-2</p></div> 
   <div class="col-2"><p>col-2</p></div> 
   </div> 
   <div class="row">
   <div class="col-6"><p>col-3</p></div> 
   <div class="col-6"><p>col-3</p></div> 
   </div> 
  </div>  
</body>
</html>

image

响应式布局

  • 栅格调整并用于手机布局,只是调整列的宽度
  • 如果屏幕最大宽度600px(0~600),执行所设置的元素宽度
  • 如果屏幕最小宽度600px(600~xx),执行所设置的元素宽度
  • 如果屏幕最小宽度900px(900~xx),执行所设置的元素宽度
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    div {
      float: left;
      box-sizing: border-box;
      height: 30px;
      border: 1px solid red;
    }
    
    @media screen and (max-width: 600px) {
      .col-xs-1 {
        width: calc(100%/12);
      }
      .col-xs-2 {
        width: calc(100%/6);
      }
      .col-xs-3 {
        width: calc(100%/4);
      }
      .col-xs-4 {
        width: calc(100%/3);
      }
      .col-xs-5 {
        width: calc(100%/12*5);
      }
      .col-xs-6 {
        width: calc(100%/2);
      }
      .col-xs-7 {
        width: calc(100%/12*7);
      }
      .col-xs-8 {
        width: calc(100%/12*8);
      }
      .col-xs-9 {
        width: calc(100%/12*9);
      }
      .col-xs-10 {
        width: calc(100%/12*10);
      }
      .col-xs-11 {
        width: calc(100%/12*11);
      }
      .col-xs-12 {
        width: 100%;
      }
    }
    @media screen and (min-width: 600px) {
      .col-sm-1 {
        width: calc(100%/12);
      }
      .col-sm-2 {
        width: calc(100%/6);
      }
      .col-sm-3 {
        width: calc(100%/4);
      }
      .col-sm-4 {
        width: calc(100%/3);
      }
      .col-sm-5 {
        width: calc(100%/12*5);
      }
      .col-sm-6 {
        width: calc(100%/2);
      }
      .col-sm-7 {
        width: calc(100%/12*7);
      }
      .col-sm-8 {
        width: calc(100%/12*8);
      }
      .col-sm-9 {
        width: calc(100%/12*9);
      }
      .col-sm-10 {
        width: calc(100%/12*10);
      }
      .col-sm-11 {
        width: calc(100%/12*11);
      }
      .col-sm-12 {
        width: 100%;
      }
    }
    @media screen and (min-width: 900px) {
      .col-md-1 {
        width: calc(100%/12);
      }
      .col-md-2 {
        width: calc(100%/6);
      }
      .col-md-3 {
        width: calc(100%/4);
      }
      .col-md-4 {
        width: calc(100%/3);
      }
      .col-md-5 {
        width: calc(100%/12*5);
      }
      .col-md-6 {
        width: calc(100%/2);
      }
      .col-md-7 {
        width: calc(100%/12*7);
      }
      .col-md-8 {
        width: calc(100%/12*8);
      }
      .col-md-9 {
        width: calc(100%/12*9);
      }
      .col-md-10 {
        width: calc(100%/12*10);
      }
      .col-md-11 {
        width: calc(100%/12*11);
      }
      .col-md-12 {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <div class="col-md-2 col-sm-6 col-xs-12"></div>
  <div class="col-md-2 col-sm-6 col-xs-12"></div>
  <div class="col-md-2 col-sm-4 col-xs-12"></div>
  <div class="col-md-2 col-sm-4 col-xs-12"></div>
  <div class="col-md-2 col-sm-4 col-xs-12"></div>
  <div class="col-md-2 col-sm-6 col-xs-12"></div>
  <div class="col-md-2 col-sm-6 col-xs-12"></div>
  <div class="col-md-2 col-sm-4 col-xs-12"></div>
  <div class="col-md-2 col-sm-4 col-xs-12"></div>
  <div class="col-md-2 col-sm-4 col-xs-12"></div>
  <div class="col-md-2 col-sm-6 col-xs-12"></div>
  <div class="col-md-2 col-sm-6 col-xs-12"></div>
</body>
</html>

image