浅谈栅格化布局

  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

    

        
            
col-1
            
col-1
 
            
col-1
            
col-1

col-1

col-1

col-2

col-2