栅格系统（CSS Grid System）

最新推荐文章于 2025-05-31 16:01:08 发布

jianlu_blet

最新推荐文章于 2025-05-31 16:01:08 发布

阅读量2.4k

点赞数

本文链接：https://blog.youkuaiyun.com/jianlu_blet/article/details/79703205

版权

在做项目的时候，经常要做响应式布局，对于好多初学者来说，这还是一个比较困难的事，于是就会用一些CSS框架，比如说Bootstrap, Bootstrap虽然好多方面都做得相当完善，在快速开发的时候确实很有用，但是，毕竟是框架吗，肯定不能完全符合自己的功能需求，而且也会有很多的坑，还有的情况就是也许你只需要它的栅格系统，但不得不引用它的整个css文件，这其实是完全没有必要的。

那么，接下来我就将创建也属于自己的栅格系统，所有的规则都根据自己的实际开发需求做调整（如果用框架的话，可能你还得自己改写框架源码，这是个人不推荐的做法，它有很多弊端，这里就不一一举例了。）

从上图可以看出，一个基本的栅格系统仅仅需要几个元素：

a container （一个容器）
rows （行）
columns （列）
gutters (the space between columns)

容器：

容器是用于设置整个栅格的宽度，容器的宽度通常是100%, 但是，你可能也要设置一下最大宽度，用于限制在大屏幕的展示。

行：

行是用于确保它里面的列元素不会溢出到其他的行元素里面，为了达到目的，通常我们需要使用clearfix。

列：

列是栅格系统中最重要的组成部分，我们通常需要在不同的分辨率下，改变他的宽度来实现响应式布局。

列与列之间的间距

注意: 这里通常需要开启'border-box' 模式。

最后，就是通过媒体查询来实现响应式布局了：

完整的代码如下：

CSS代码：

.grid-container {
width : 100%;
max-width : 1200px;
margin: 0 auto;
}
.grid-container *{
box-sizing: border-box;
}
.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.664%;
}
.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;
}

@media screen 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%;
}
}

@media screen 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%; }
}

HTML代码：

</div>