译】跟着写一个CSS栅格布局
我们常在诸如Bootstrap的前端框架中见到css栅格系统,如果仅仅为了使用栅格布局而引入一个前端框架是很不明智的行为。所以,这篇文章就是帮助你从零打造一个CSS Grids~
什么是栅格系统
栅格系统(CSS Grids)是一种运用固定的格子设计版面布局,在报刊杂志上尤为常见。
如今响应式设计大行其道,对于前端开发,栅格系统可以:
- 提高生产力,通过在网格的划分,元素更容易堆放而且在跨浏览器上面具有一致性,使我们可以专心的注意布局而不是兼容上。
- 具有灵活性,无论是什么样的布局,都可以拆分到粒度为一个网格的大小。
- 支持响应式设计,栅格系统本身能很好的和响应式设计结合在一起,或者说,我们的栅格系统是基于响应式设计的。
栅格系统的组成
如上图,是一个基本的栅格布局,它包含了:
- container: 包裹整个栅格系统的容器
- rows: 行
- columns: 列
- gutters: 各列的间的空隙
容器 (The Container)
为了给整个栅格系统设置宽度,我们需要一个容器。容器的宽度通常为100%,但你可能希望为更大的显示器设置最大宽度max-width。
.grid-container {
width : 100%;
max-width : 1200px;
}
行 (The Row)
行元素用于防止里面的列( column )溢出到其他的行。通常会使用clearfix来清除浮动,因为我们是通过浮动来制作栅格系统的。
/*-- 清除浮动 -- */
.row:before,
.row:after {
content:"";
display: table ;
clear:both;
}
列 (The Column)
列元素是栅格系统的核心,也是最复杂的一部分。因为列的定位可以有很多实现方式,同时还需要考虑它的宽度以及响应式设计等因素。
列的位置
Floats, inline-blocks, display-table, display-flex. 他们都可以实现栅格布局中,列的定位。我个人推荐使用“float”,如果我们的列都是空的,我们浮动的列都会贴在彼此的顶部。为了避免这种情况:
[class*='col-'] {
float: left;
min-height: 1px;
}
列的宽度
由于容器总宽度是100%,我们想要6列,所以每列宽度为:100 / 6 = 16.66
[class*='col-'] {
float: left;
min-height: 1px;
width: 16.66%;
}
这里我们把一行分成六列,通过简单的计算,还可以定义列的多种宽度。
.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)
由于列的宽度单位是响应式的%
,我们给列元素的间距是固定单位的padding(px),为了避免复杂的计算,我们规定所有的盒子模型为border-box
类型。
/*-- 将栅格系统里的所有元素设为 border box --*/
.grid-container *{
box-sizing: border-box;
}
[class*='col-'] {
float: left;
min-height: 1px;
width: 16.66%;
/*-- 设置间隙 --*/
padding: 12px;
}
全局设置
border-box
很好,它可以省去一次又一次的加减,它还可以让有边框的盒子正常使用百分比宽度。但是使用了border-box
可能会与一些依赖默认box-sizing
的库冲突,不过这种问题大多数时候可以通过把交由这些库处理的块的box-sizing
设置回content-box
来解决。
一个基本的栅格布局完成啦
HTML
<div class="grid-container outline">
<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-3"><p>col-3</p></div>
<div class="col-3"><p>col-3</p></div>
</div>
</div>
CSS
.grid-container{
width: 100%;
max-width: 1200px;
}
/*-- 使用 cleafix 清除浮动 -- */
.row:before,
.row:after {
content:"";
display: table ;
clear:both;
}
[class*='col-'] {
float: left;
min-height: 1px;
width: 16.66%;
/*-- 设置列的左右间隙 -- */
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%; }
.outline, .outline *{
outline: 1px solid #F6A1A1;
}
/*-- 列的额外内容样式 --*/
[class*='col-'] > p {
background-color: #FFC2C2;
padding: 0;
margin: 0;
text-align: center;
color: white;
}
来,我们写个响应式栅格系统
为了适配移动设备的布局,我们只需改变列的宽度。比如当屏幕宽度小于800px时,为了布局更简洁,我们使用两倍列的宽度,一行六列变为了一行三列
@media all and (max-width:800px){
.col-1{ width: 33.33%; }
.col-2{ width: 50%; }
.col-3{ width: 83.33%; }
.col-4{ width: 100%; }
.col-5{ width: 100%; }
.col-6{ width: 100%; }
.row .col-2:last-of-type{
width: 100%;
}
.row .col-5 ~ .col-1{
width: 100%;
}
}
当屏幕宽度比800px还小时:
@media all and (max-width:650px){
.col-1{ width: 50%; }
.col-2{ width: 100%; }
.col-3{ width: 100%; }
.col-4{ width: 100%; }
.col-5{ width: 100%; }
.col-6{ width: 100%; }
}
我们现在已经创建了自己的响应式栅格系统,而且没有使用任何第三方框架。
<div class="grid-container outline">
<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-3"><p>col-3</p></div>
<div class="col-3"><p>col-3</p></div>
</div>
<div class="row">
<div class="col-4"><p>col-4</p></div>
<div class="col-2"><p>col-2</p></div>
</div>
<div class="row">
<div class="col-5"><p>col-5</p></div>
<div class="col-1"><p>col-1</p></div>
</div>
<div class="row">
<div class="col-6"><p>col-6</p></div>
</div>
</div>
以上内容只是css栅格系统的入门指南,在项目中需要考虑更多因素来灵活使用。
- 原文链接:Creating Your Own CSS Grid System
- 原文作者:Jan Drewniak
- 译者:廖柯宇