【翻译】创建自己的CSS 网格系统

【原文链接】 http://j4n.co/blog/Creating-your-own-css-grid-system

Creating Your Own CSS Grid System

 

第一部分-网格系统基础　　

CSS网格已经存在了很长一段时间。他们往往是捆绑在前端框架中如Bootstrap。我不讨厌使用Bootstrap，但有时如果只是需要的是一个网格系统，使用框架会大材小用。这里是如何从零开始制作自己的CSS网格系统。

　　网格系统元素：

正如我们所见，一个基本的网格只包含几个少量的元素

--container 一个容器

--rows       行元素

--columns  列元素

--gutters   元素间的间隔

一 container

container 的作用是设置整个网格的宽度，容器的宽度一般是100%，但你也可能希望设定一个最大宽度。

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

二、Rows

行元素的目的是保持列（column）元素不会溢出到其他行，为达到这个目的，我们将使用清除浮动的方法来确保行元素中的每个元素保持在行元素中。

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

三、Columns

列元素是网格系统中最复杂的部分。首先有许多不同的针对列元素的CSS定位方式，列元素的宽度以及响应式设计需要考虑。在这篇教程中我们将介绍定位元素并给予他们宽度，响应式设计的要点将在以后介绍。

1、列元素定位

Floats, inline-blocks, display-table, display-flex.  有非常多的CSS方法给列元素定位。从我个人的经验来看，最广泛使用并最容易出错的是“float”方法。

如果我们的列元素是空的，我们的浮动列元素将会堆在其他元素的顶部，为了预防这个问题，我们要给我们的列元素一个最小高度1px 并浮动她们

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

2、列元素宽度

计算列宽度的常规方法是用：容器宽度/列数  得到列宽度。在这个实例中，我们的容器宽度为100%，要分为六列，100/6=16.66，因此我们初始的列宽为16.66%

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

这当然是刚刚开始，如果我们想创建一个两个列元素宽度的section，我们就需要创建一个两倍宽的列元素，这个计算很简单

    .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个时的情况。

三、列间距（Columns gutter）

在“border-box” box-sizing模型之前，给百分宽度元素一个静态的padding真的很痛苦。幸运的是使用“border-box”模型，我们可以轻松创建列宽

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

（就我个人而言，我在CSS中使用 * {box-sizing: border-box;} 来申明页面中的每个元素border-box属性。

四、我们基本的网格系统已经完成

<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-5元素旁的.col-1元素

为解决这个问题，在特殊去情况下我们把.col-1元素及.col-2元素设置为100%宽度

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

当元素显著小于800px（比如480px）我们可以让除了.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网格系统不再神秘。