实现类似BootStrap的响应式12栏网格布局

CSS3
, ,

今天研究了如何实现网格布局，主要学习了这篇文章中的内容。特写此篇博客作为总结。

一、网格布局的用途

网格布局的作用在于更有效地控制元素在网页中所占比例的大小。比如，博客中有一个留言板模块，在比较大的屏幕上，我们希望它占了右边 25% 的宽度，在手机等比较小的屏幕上，我们希望它占 100% 的宽度，出现在博客文章下方。网格布局是一种实现这一需求的办法，它的好处是，把所有的宽度分为固定栏数（常用 12 栏），从而更高效的控制元素宽度。

二、如何实现网格布局

一个网格系统所包括的元素

如上图所见，一个基础的网格系统包括。

  • 容器（container）
  • 行（row）
  • 列（column）
  • 槽（gutter）

1. 容器（container）

容器的目的是设置整个网格的宽度。容器的宽度一般为100%，可以设置一个最大的宽度值。

1
2
3
4
.grid-container {
  width : 100%;
  max-width : 1200px;
}

2. 行（row）

行元素是用来包裹列（column），防止列浮动到容器外部。通过使用clearfix清除浮动。

1
2
3
4
5
6
7
/*-- our cleafix hack -- */ 
.row:before, 
.row:after {
  content:"";
  display: table;
  clear:both;
}

3. 列（column）

列是用来放置内容的区块，通过对其浮动，使其能在一行中呈现出来。

1
2
3
4
[class*='col-'] {
  float: left;
  min-height: 1px; 
}

ps：[class*='col-']这个是正则的css，表示所有css以col开始的class都使用这个规则。

另外，因为我们需要创建12栏的网格，所以每栏的宽度为 100%/12（总宽度/栏数）= 8.33%。
得出

1
2
3
4
5
6
7
8
9
10
.col-1 {
  width: 8.33%; // 1个栏
}
.col-2 {
  width: 16.66%; // 2个栏
}
.col-3 {
  width: 25%; // 3个栏
}
// 以此类推...

4. 槽（gutter）

由图可知，槽是两列中的空隙。为了更方便的创建槽，通过设置CSS3中box-sizing: border-box，将W3C标准盒模型变为ie的盒模型，即内容部分包括了border和padding。

1
2
3
4
5
6
7
8
9
10
11
12
13
/*-- setting border box on all elements inside the grid --*/
.grid-container *{
  box-sizing: border-box; 
  width : 100%;
}

[class*='col-'] {
  float: left;
  min-height: 1px; 
  width: 16.66%; 
  /*-- our gutter --*/
  padding: 12px;
}

三、完整的代码

HTML

1
2
3
4
5
6
7
8
9
10
11
12
<div class="grid-container">
  <div class="row">
    <div class="col-4"><p></p></div>
    <div class="col-4"><p></p></div>
    <div class="col-4"><p></p></div>
  </div>
  <div class="row">
    <div class="col-3"><p></p></div>
    <div class="col-6"><p></p></div>
    <div class="col-3"><p></p></div>
  </div>
</div>

CSS

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
.grid-container{
  width: 100%; 
  max-width: 1200px;      
}

/*-- our cleafix hack -- */ 
.row:before, 
.row:after {
  content:"";
  display: table ;
  clear:both;
}

[class*='col-'] {
  float: left; 
  min-height: 1px; 
  width: 8.33%;
  /*-- our gutter -- */
  padding: 12px; 
  background-color: #FFDCDC;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%}
.col-5 {width: 41.66%;}
.col-6 {width: 50%}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%}
.col-11 {width: 91.66%}
.col-12 {width: 100%}

四、创建响应式网格布局

以 BootStrap 的网格系统为例，DOM 元素类名形如 col-md-4；其中 col 是“列” column 的缩写；md 是 medium 的缩写，适用于应屏幕宽度大于 768px 的场景；4 是占四栏的意思。因此，col-md-4 的意思是，在屏幕宽度大于 768px 时，该元素占四栏。

由此通过使用CSS3中的媒体查询，区分不同屏幕宽度。

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
/*-- 屏幕宽度小于768px -- */ 
@media screen and (max-width: 768px) {
  .col-sm-1 {width: 8.33%;}
  .col-sm-2 {width: 16.66%;}
  .col-sm-3 {width: 25%;}
  .col-sm-4 {width: 33.33%;}
  .col-sm-5 {width: 41.66%;}
  .col-sm-6 {width: 50%;}
  .col-sm-7 {width: 58.33%;}
  .col-sm-8 {width: 66.66%;}
  .col-sm-9 {width: 75%;}
  .col-sm-10 {width: 83.33%;}
  .col-sm-11 {width: 91.66%;}
  .col-sm-12 {width: 100%;}
}

/*-- 屏幕宽度大于768px -- */ 
@media screen and (min-width: 768px) {
  .col-md-1 {width: 8.33%;}
  .col-md-2 {width: 16.66%;}
  .col-md-3 {width: 25%;}
  .col-md-4 {width: 33.33%;}
  .col-md-5 {width: 41.66%;}
  .col-md-6 {width: 50%;}
  .col-md-7 {width: 58.33%;}
  .col-md-8 {width: 66.66%;}
  .col-md-9 {width: 75%;}
  .col-md-10 {width: 83.33%;}
  .col-md-11 {width: 91.66%;}
  .col-md-12 {width: 100%;}
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="grid-container">
  <div class="row">
    <div class="col-md-4 col-sm-6"><p></p></div>
    <div class="col-md-4 col-sm-6"><p></p></div>
    <div class="col-md-4 col-sm-12"><p></p></div>
  </div>
  <div class="row">
    <div class="col-md-3 col-sm-3"><p></p></div>
    <div class="col-md-6 col-sm-6"><p></p></div>
    <div class="col-md-3 col-sm-3"><p></p></div>
  </div>
  <div class="row">
    <div class="col-md-1 col-sm-2"><p></p></div>
    <div class="col-md-1 col-sm-2"><p></p></div>
    <div class="col-md-2 col-sm-8"><p></p></div>
    <div class="col-md-2 col-sm-3"><p></p></div>
    <div class="col-md-6 col-sm-3"><p></p></div>
  </div>
</div>