免費AI編程助手
網(wǎng)格如此簡單
絕大多數(shù)的網(wǎng)站都在使用一個網(wǎng)格。 他們可能沒有明確的使用網(wǎng)格系統(tǒng)，但如果他們有一個向左浮動“主要內(nèi)容區(qū)”和一個向右浮動的“側(cè)邊欄”，這就是一個簡單的網(wǎng)格。
如果需要更復雜的布局，人們往往會借助框架。 他們猜想網(wǎng)格是超高難度的事情最好留給超級CSS書呆子。 這一理念導致這樣的事實，很多網(wǎng)格系統(tǒng)是非常復雜的 。
下面是我如何構(gòu)建網(wǎng)格。 它一點都不難也不復雜。 甚至使他們靈活也不是一個大的任務。
容器
塊級元素的寬度和它的父元素一樣（ width: auto; ）。 我們可以把它的寬度看作是100%。 wrapper 對于網(wǎng)格可能語義不太好，但它只是一個普通的包裝器，所以div是合適的。
<div class="grid">
<!-- 100% wide -->
</div>
列
讓我們從一個實用的，通用的需要開始：主要內(nèi)容區(qū)寬度為2/3和1/3寬的側(cè)邊欄。 我們只用2個div元素代表兩列并取的適當?shù)念惷?/p>
<div class="grid">
<div class="col-2-3">
Main Content
</div>
<div class="col-1-3">
Sidebar
</div>
</div>
為了讓他們水平排列，我們只需要浮動他們并設置合適的寬度。 我們選擇他們像下面這樣：
[class*='col-'] {
float: left;
}
各個寬度的設置像下面這樣：
.col-2-3 {
width: 66.66%;
}
.col-1-3 {
width: 33.33%;
}
這就是全部的前提關(guān)于簡單網(wǎng)格。
給容器清除浮動
父元素會發(fā)生坍塌高度變?yōu)?，因為它的子元素全部浮動，浮動的元素將脫離標準流。 下面讓我們修補這種情況通過clear屬性。 你只需像下面這樣：
.grid:after {
content: "";
display: table;
clear: both;
}
間隙
網(wǎng)格最難的部分是間隙(列之間的空隙)。 到目前為止，我們已經(jīng)使用百分比制成了靈活的網(wǎng)格。 我們可以使所有復雜數(shù)學計算并且讓我們的間隙也使用百分比，但無論如何我個人不喜歡百分比的間隙，我喜歡固定像素尺寸的間隙。 此外，我們正試圖解決這個問題。
第一步是使用 box-sizing: border-box;。
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
現(xiàn)在，當我們設置元素的寬度，這個寬度=width+padding+border。
第二步是給除了最后一個以外的所有列的右內(nèi)邊距設置一個固定值。
[class*='col-'] {
padding-right: 20px;
}
[class*='col-']:last-of-type {
padding-right: 0;
}
這就是基本間隙的所有設置了。
外部間隙
需要設置外部間隙(父元素的內(nèi)邊距)？我喜歡使用一個可選類：
<div class="grid grid-pad">
Grid with outside gutters also
</div>
第一步是給網(wǎng)格父元素添加左內(nèi)邊距（以及可選的的頂部和底部內(nèi)邊距）：
.grid-pad {
padding: 20px 0 20px 20px;
}
第二步是重新設置最后一列的右內(nèi)邊距
.grid-pad > [class*='col-']:last-of-type {
padding-right: 20px;
}
更多列選擇
超級簡單：
.col-1-2 {
width: 50%;
}
.col-1-4 {
width: 25%;
}
.col-1-8 {
width: 12.5%;
}
做你想做的效果，只要確保列分數(shù)加起來為1。 耶，需要一點點思考，但比平常更容易。
Sass
在這里我不過分使用它，但使用它讓所有事情變得更加簡潔(還可用less)：
* {
@include box-sizing(border-box);
}
$pad: 20px;
.grid {
background: white;
margin: 0 0 $pad 0;
&:after {
/* Or @extend clearfix */
content: "";
display: table;
clear: both;
}
}
[class*='col-'] {
float: left;
padding-right: $pad;
.grid &:last-of-type {
padding-right: 0;
}
}
.col-2-3 {
width: 66.66%;
}
.col-1-3 {
width: 33.33%;
}
.col-1-2 {
width: 50%;
}
.col-1-4 {
width: 25%;
}
.col-1-8 {
width: 12.5%;
}
/* Opt-in outside padding */
.grid-pad {
padding: $pad 0 $pad $pad;
[class*='col-']:last-of-type {
padding-right: $pad;
}
}
模塊
我喜歡這些網(wǎng)格內(nèi)工作的“模塊”。
<div class="grid">
<div class="col-2-3">
<article class="module">
stuff
</article>
<article class="module">
stuff
</article>
</div>
<div class="col-1-3">
<aside class="module">
Sidebar stuff. Sub modules?
</aside>
</div>
</div>
將內(nèi)容分解成塊這種方法看起不錯。 額外的副作用是每個模塊可以自己的內(nèi)邊距，來是文本內(nèi)容和網(wǎng)格的邊緣保持距離。
成果
這是在CodePen上的一個例子
瀏覽器不支持
工作僅僅在IE 8+，和所有其他標準的東西看起來是好的。 如果你需要支持IE 7，你將不得不做一些其他的工作）。
此外，F(xiàn)lexbox讓這變得更好更容易(有多種方法，包括從新設置盒子模型)，但我認為，我們大約需要一年事件，直到我們可以開始考慮使用它。
相關(guān)
注：本文為翻譯文章，原文章名稱《Don’t Overthink It Grids》
更多建議：