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

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

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

一般的网格布局如下

grid-elements

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

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

容器

container

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

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

行

row

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

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

列

column

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

列定位

浮动，行内块，块级表格（display-table）,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

在'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-'] {
        float: left;
        min-height: 1px; 
        width: 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">
    <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;      
    }

    /*-- 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-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>

<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-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 all and (max-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创建网格布局的过程并不神秘。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/huansky/p/5315528.html