建立本身的 CSS 網格系統【轉載 | 譯】

時間 2019-11-11

標籤建立本身 css 網格系統轉載 | 譯欄目 CSS 简体版

原文原文鏈接

此文翻譯自 Creating Your Own CSS Grid System | Jan，英文很差若有錯誤 ✖ ，請指正。

CSS 網格已經存在很長時間了。它們一般捆綁在 Bootstrap 等框架中。我不是一個 Bootstrap 仇恨者，但若是你真正須要的只是一個網格，有時使用一個框架就「太過度」了。如下是如何從頭開始製做本身的 CSS 網格。css

CSS 網格的元素

咱們能夠看到，基本網格只包含幾個元素：html

Container（容器）
row（行）
Column（列）
Gutter（列之間的空間）

容器（Container）

容器的目的是設置整個網格的寬度。容器的寬度一般爲 100％，但你可能但願設置一個最大寬度。框架

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

列之間的空間（gutter）

row 元素的目的是使其中的列不會溢出到其餘行上。爲此，咱們將使用 clearfix hack 來確保行內的全部內容都保留在行內。佈局

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

列（Column）

column 是網格中最複雜的部分。首先，有幾種不一樣的方法在 CSS 中定位 column，而後有各類寬度要考慮，以及響應式設計等因素。在本教程中，咱們將定義 column 並賦予它們寬度。flex

列定位（Column Positioning）

float, inline-block, display: table, display: flex。這些都是在 CSS 中定位 column 的不一樣方法。這些方法中最容易出錯和最普遍使用的是「浮動」方法。若是咱們的列是空的，那麼咱們的浮動列將堆疊在一塊兒。爲了防止這種狀況，給 column 提供 1px 的最小高度並使它們浮動。spa

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

列寬（Column Widths）

要查找一列的寬度，咱們所要作的就是將總列數除以容器的寬度。在咱們的例子中，容器的寬度是 100％，咱們想要6 列，因此 100/6 = 16.66，因此咱們的基本列寬度是 16.66％。翻譯

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

這固然只是一個開始。若是咱們想要一個 2 列寬的部分，咱們必須建立一個 2 列寬的 column。計算很是簡單。設計

咱們在使用這些列組合時惟一考慮的是，一行中的總列數最多爲 6（或者總列數是多少）。code

響應式系統中內邊距問題

在 W3C 標準盒模型條件下，在響應式系統中給寬度單位爲百分比的元素設置內邊距很麻煩。幸運的是，使用 border-box 模型，咱們能夠輕鬆設置內邊距。htm

/* 在網格內的全部元素上改變盒模型 */
.grid-container *{
  box-sizing: border-box; 
}

[class*='col-'] {
  float: left;
  min-height: 1px; 
  width: 16.66%; 
  /* 設置內邊距 */
  padding: 12px;
}

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

基本網格準備好了

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

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

/* 一些額外的列內容樣式 */
[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>

使咱們的網格系統響應

調整咱們的網格以實現移動佈局很是簡單。咱們所要作的就是調整列的寬度。爲了簡單起見，我將爲 800px 如下的屏幕加倍列寬。惟一須要注意的是一些例外，例如：大於 col-3 的列在視口小於 800px 時鋪滿。

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

對於小於 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%;    }
}

咱們如今建立了本身的響應式網格系統，而不使用框架。

<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 網格的神祕面紗。