摘要：為了防止這種情況，給提供的最小高度并使它們浮動(dòng)。基本網(wǎng)格準(zhǔn)備好了一些額外的列內(nèi)容樣式使我們的網(wǎng)格系統(tǒng)響應(yīng)調(diào)整我們的網(wǎng)格以實(shí)現(xiàn)移動(dòng)布局非常簡(jiǎn)單。注意本指南只是創(chuàng)建自己響應(yīng)式網(wǎng)格系統(tǒng)的起點(diǎn)。

此文翻譯自 Creating Your Own CSS Grid System | Jan，英文不好如有錯(cuò)誤 ? ，請(qǐng)指正。

CSS 網(wǎng)格已經(jīng)存在很長(zhǎng)時(shí)間了。它們通常捆綁在 Bootstrap 等框架中。我不是一個(gè) Bootstrap 仇恨者，但如果你真正需要的只是一個(gè)網(wǎng)格，有時(shí)使用一個(gè)框架就“太過分”了。以下是如何從頭開始制作自己的 CSS 網(wǎng)格。

我們可以看到，基本網(wǎng)格只包含幾個(gè)元素：

Container（容器）

row（行）

Column（列）

Gutter（列之間的空間）

容器的目的是設(shè)置整個(gè)網(wǎng)格的寬度。容器的寬度通常為 100％，但你可能希望設(shè)置一個(gè)最大寬度。

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

row 元素的目的是使其中的列不會(huì)溢出到其他行上。為此，我們將使用 clearfix hack 來確保行內(nèi)的所有內(nèi)容都保留在行內(nèi)。

/* 我們的 cleafix hack  */
.row: before,
.row: after {
    content: "";
    display: table;
    clear: both;
}

column 是網(wǎng)格中最復(fù)雜的部分。首先，有幾種不同的方法在 CSS 中定位 column，然后有各種寬度要考慮，以及響應(yīng)式設(shè)計(jì)等因素。在本教程中，我們將定義 column 并賦予它們寬度。

float, inline-block, display: table, display: flex。這些都是在 CSS 中定位 column 的不同方法。這些方法中最容易出錯(cuò)和最廣泛使用的是“浮動(dòng)”方法。如果我們的列是空的，那么我們的浮動(dòng)列將堆疊在一起。為了防止這種情況，給 column 提供 1px 的最小高度并使它們浮動(dòng)。

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

要查找一列的寬度，我們所要做的就是將總列數(shù)除以容器的寬度。在我們的例子中，容器的寬度是 100％，我們想要6 列，所以 100/6 = 16.66，所以我們的基本列寬度是 16.66％。

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

這當(dāng)然只是一個(gè)開始。如果我們想要一個(gè) 2 列寬的部分，我們必須創(chuàng)建一個(gè) 2 列寬的 column。計(jì)算非常簡(jiǎn)單。

我們?cè)谑褂眠@些列組合時(shí)唯一考慮的是，一行中的總列數(shù)最多為 6（或者總列數(shù)是多少）。

在 W3C 標(biāo)準(zhǔn)盒模型條件下，在響應(yīng)式系統(tǒng)中給寬度單位為百分比的元素設(shè)置內(nèi)邊距很麻煩。幸運(yùn)的是，使用 border-box 模型，我們可以輕松設(shè)置內(nèi)邊距。

 /* 在網(wǎng)格內(nèi)的所有元素上改變盒模型 */
.grid-container *{
  box-sizing: border-box; 
}

[class*="col-"] {
  float: left;
  min-height: 1px; 
  width: 16.66%; 
  /* 設(shè)置內(nèi)邊距 */
  padding: 12px;
}

使用 * {box-sizing: border-box;} 在 CSS 中改變所有元素的盒模型。

    

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

        
col-2
 
        
col-2
 
        
col-2
 
    
 
    

        
col-3
 
        
col-3
 
    
 

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

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

[class*="col-"] {
  float: left;
  min-height: 1px;
  width: 16.66%;
  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;
}

/* 一些額外的列內(nèi)容樣式 */
[class*="col-"] > p {
  background-color: #FFC2C2;
  padding: 0;
  margin: 0;
  text-align: center;
  color: white;
}

    

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

        
col-2
        
col-2
        
col-2
    
    

        
col-3
        
col-3
    

調(diào)整我們的網(wǎng)格以實(shí)現(xiàn)移動(dòng)布局非常簡(jiǎn)單。我們所要做的就是調(diào)整列的寬度。為了簡(jiǎn)單起見，我將為 800px 以下的屏幕加倍列寬。唯一需要注意的是一些例外，例如：大于 col-3 的列在視口小于 800px 時(shí)鋪滿。

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

對(duì)于小于 650px 的屏幕。

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

我們現(xiàn)在創(chuàng)建了自己的響應(yīng)式網(wǎng)格系統(tǒng)，而不使用框架。

    

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

        
col-2
        
col-2
        
col-2
    
    

        
col-3
        
col-3
    
    

        
col-4
        
col-2
    
    

        
col-5
        
col-1
    
    

        
col-6
    

注意：本指南只是創(chuàng)建自己響應(yīng)式網(wǎng)格系統(tǒng)的起點(diǎn)。它不是一個(gè)框架，甚至不是一個(gè)完整的解決方案，我希望它能夠揭開 CSS 網(wǎng)格的神秘面紗。

【1】Creating Your Own CSS Grid System | Jan