浅谈栅格化布局

  Bootsrtap这个框架的栅格化布局很有意思，可以做到响应式布局。一直很好奇原理，后来在参加百度前端学院时看到导师推荐的一篇自己设计栅格化布局的文章，很有意思，所以就试着翻译一下。如果有不对的地方，希望指正。
  css的栅格化布局存在已久，他们经常被绑定在如bootstrap之类的框架上。虽然我不是一个讨厌bootstrap的人，但是有时候需要的仅仅是栅格化布局而不是整个框架。这里会展示如何从头自做一个自己的栅格化布局。

  栅格化布局中的元素：

• Column：列
• Row：行
• Gutter：插槽（列之间的距离）
• Container：容器

The container 容器

  容器的目的是设置整个栅格化布局的宽度。通常这个宽度是百分之百，但是或许你想为屏幕较大的媒体设置一个最大宽度（max-width）

 

.grid-container{
        width : 100%;
        max-width : 1200px; 
    }

The Row 行

行元素的目的是防止它内部的列（column）元素溢出到别的行。为了实现这个目的，我们要使用clearfix来清除浮动，以确保行内所有的东西都在行内。




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

The column 列

列是栅格化布局中最复杂的部分。首先，css中有多种方法来定位列，而且要考虑列的不同宽度，还有响应式布局。这个教程里面我们将对列进行定位，并且给她们一些宽度。响应式布局稍后再讲。

列的定位

Float, inline-block, display:table,display-flex,这些是css中所有定位列的方法（译注：我不知道是不是所有的（dog笑））。在我的个人经验中，float是最不容易出错而且在那些方法中最广泛运用的方法。当所有的列都是空的话，他们会堆叠起来。为了避免这个，我们将给列设置float属性的时候再设置最小高度1px

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

列的宽度

为了得出一个列的宽度，我们需要用容器（container）的宽度除以列的总数。举个例子，容器的宽度为100%，我们想要6列，所以每列的宽度是100%/6=16.6%。

[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%;
    }

需要注意的是当使用那些列组合起来进行布局的话，列的总数加起来要达到6（或者其他设定的列总数，看个人情况，bootstrap是12）。

Column gutters（插槽）

如果box-sizing的值不是border-box,给宽度是百分比的元素设置一个固定的padding值是一个痛苦的事情。好在设置为border-box后，方便了太多。

    

/*-- setting border box on all elementsinside the grid --*/
    .grid-container *{
        box-sizing: border-box; 
    }
[class*='col-'] {
        float: left;
        min-height: 1px; 
        width: 16.66%; 
        /*-- our gutter --*/
        padding: 12px;
    }

基础的栅格化布局就做好了：

Css
.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: 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%;   }
.outline, .outline *{
        outline: 1px solid #F6A1A1;
    }
/*-- some extra column content styling --*/
    [class*='col-'] > p {
     background-color: #FFC2C2;
     padding: 0;
     margin: 0;
     text-align: center; 
     color: white; 
    }

HTML

    

<div class="grid-containeroutline">
        <divclass="row">
            <div class="col-1"><p>col-1</p></div>
            <divclass="col-1"><p>col-1</p></div> 
            <div class="col-1"><p>col-1</p></div>
            <divclass="col-1"><p>col-1</p></div> 
            <div class="col-1"><p>col-1</p></div>
            <divclass="col-1"><p>col-1</p></div> 
        </div> 
        <divclass="row">
            <divclass="col-2"><p>col-2</p></div> 
            <divclass="col-2"><p>col-2</p></div> 
            <divclass="col-2"><p>col-2</p></div> 
        </div> 
        <divclass="row">
            <divclass="col-3"><p>col-3</p></div> 
            <divclass="col-3"><p>col-3</p></div> 
        </div> 
    </div>
<hr/>

第二部分：制作响应式栅格化布局

为移动布局调整我们的栅格化布局代码很容易，只要调整了每列的宽度就可以了。
来个简单点的例子，我准备当屏幕的宽度在800px以下时将宽度调整为原来的二倍。
有一点需要注意，有时候会出现一些意外，比如放在.col-5后面的.col-1和最后一个.col-2会出现
不能填满整行的情况，这样就不符合最初的把col-1与.col-5放在一起占据一行的设想。解决这个问题可以让那种情况下的.col-2和.col-1占据100%的宽度。

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

这就是全部的成果，我们没有使用框架就制作出了自己的栅格化布局。但是这些其实只是创作自己的系统的开端，这既不是一个框架也不是一个完整的解决办法，但是我希望这为能阐明制作一个栅格化布局起一点作用。

• 原文地址
• bootstrap的原理
• 国内的一个关于这个的文章