建立自己的 CSS 網格系統【轉載 | 譯】
此文翻譯自 Creating Your Own CSS Grid System | Jan ,英文不好如有錯誤 ✖ ,請指正。
CSS 網格已經存在很長時間了。它們通常捆綁在 Bootstrap 等框架中。我不是一個 Bootstrap 仇恨者,但如果你真正需要的只是一個網格,有時使用一個框架就“太過分”了。以下是如何從頭開始製作自己的 CSS 網格。
CSS 網格的元素
我們可以看到,基本網格只包含幾個元素:
- 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 並賦予它們寬度。
列定位(Column Positioning)
float, inline-block, display: table, display: flex。這些都是在 CSS 中定位 column 的不同方法。這些方法中最容易出錯和最廣泛使用的是“浮動”方法。如果我們的列是空的,那麼我們的浮動列將堆疊在一起。為了防止這種情況,給 column 提供 1px 的最小高度並使它們浮動。
[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(或者總列數是多少)。
響應式系統中內邊距問題
在 W3C 標準盒模型條件下,在響應式系統中給寬度單位為百分比的元素設定內邊距很麻煩。幸運的是,使用 border-box
模型,我們可以輕鬆設定內邊距。
/* 在網格內的所有元素上改變盒模型 */ .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 網格的神祕面紗。