不用bootstrap，只用CSS创建网格布局

本文译自【http://j4n.co/blog/Creating-your-own-css-grid-system】，英语好的，可直接查看原网页，不需要翻墙。

翻译拿不准的地方会有英文原文，方便大家理解。

一般的网格布局如下

可以看出主要有以下几个部分

• a container（容器）
• rows（行）
• columns（列）
• gutters (the space between columns)（列边距）

容器

容器的目的就是设置整个网格的宽度，通常设置为100%，但可能要给大屏显示器设置一个最大宽度。

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

行

 

行是为了将列放在里面，并防止其溢出到其他行中。为了实现这个目的，我们采用清楚浮动的hack技术来确保所有的内容都在行中。

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

列

 

毫无疑问，列是网格布局中最复杂的一部分。首先，在CSS当中，有好几种不同的列的定位方式，而且还要考虑不同的宽度，比如响应式设计。在这里我们将列设定位置，并给出宽度。下一部分再讲响应式设计。

列定位

浮动，行内块，块级表格（display-table）,flex,有各种各样的方法。从我个人经验出发，最不容易出错和使用最广泛的就是float了。如果列是空的，将会漂浮在其他元素上面，为了防止这个，我们可以设定一个最小的宽度。

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

列宽

为了确定一列的大小，我们可用容器的宽度来除以总的列数。在这里，容器的宽度是100%，假设是6列，那么一列就是100%/6=16.66%。

 1px; 
        width: 16.66%; 
    }

当然，这只是开始，如果我们想要其他的宽度，可以这样设置：

.col-1{
        width: 16.66%; 
    }
    .col-2{ 33.33%; 
    }
    .col-3{ 50%; 
    }
    .col-4{ 66.664%;
    }
    .col-5{ 83.33%;
    }
    .col-6{ 100%;
    }

我们唯一要注意的就是，不管你最终多少列，各列加起来不能超过容器的宽度。

列边距

 

 

在'border-box' box-sizing模型出现之前，给一个百分比元素一个不可改变的宽度是一件很痛苦的事。幸运的是，用'border-box' box-sizing可以轻易的做到。

Before the 'border-box' box-sizing model,giving percentage-width elements a static padding was a real pain. Luckily,using the 'border-box' model,we can create gutters with ease.

-- setting border box on all elements inside the grid --
    .grid-container *{
        box-sizing: border-box; 
    }

    [class*='col-'] { 16.66%; 
        -- our gutter --*/
        padding: 12px;
    }

(Personally,I use * {box-sizing: border-box;} in my CSS to apply border-box to everything on the page).

（这句不好翻译，主要是还不理解box-sizing)

基本网格布局如下：

<div class="grid-container outline">
    ="row">
        ="col-1"><p>col-1</></div> 
        > 
    ="col-2">col-2="col-3">col-3> 
>

CSS

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

    
          display:
        clear:both;
    } 
        min-height:-- our gutter --  12px; 
        background-color: #FFDCDC;
    }

    .col-1{ width: 16.66%; } 33.33%; } 50%;    } 66.66%; } 83.33%; } 100%;   }

    .outline,.outline *{
        outline: 1px solid #F6A1A1; 
    }

    -- some extra column content styling --
    [class*='col-'] > p {
     background-color: #FFC2C2; 
     padding: 0;
     margin:
     text-align: center; 
     color: white; 
    }

HTML

    >
            > 
            >

hr/>

 

制作网格布局

针对手机，调整我们的网格布局非常简单，只需要调整列的宽度就够了。为简单起见，在屏幕小于800px时，将宽度增大一倍。要注意的就是当.col-2 ， .col-1，col-5在一行的时候，这时候我们将.col-2 ， .col-1占满整行。

The only thing to watch out for is a few exceptions where the last column in the row hangs off the end. Such as in the case of the .col-2 columns and the.col-1 beside the .col-5 column. 
To counter this,we'll make the last .col-2 and .col-1 in the row 100% wide.

@media all and (max-width:800px){
        .col-1{ width: 33.33%;    }
        .col-2{ 50%;        }
        .col-3{ 83.33%;    }
        .col-4{ 100%;    }
        .col-5{
        .col-6{ 100%;      }

        .row .col-2:last-of-type{
            width: 100%; 
        }

        .row .col-5 ~ .col-1{
    }

如果屏幕更小，我们继续调整。

 @media all and (max-width:650px){
    }

到这里，我们就创建害了我们的响应式布局：

="col-4">col-4="col-5">col-5="col-6">col-6>

要提醒的是这只是创建网格布局的开始，这还算不上是一个框架或完美的解决方法，但至少让我们觉得采用CSS创建网格布局的过程并不神秘。