網(wǎng)格

預(yù)備知識(shí):	HTML基礎(chǔ) (學(xué)習(xí)?Introduction to HTML), 以及了解CSS如何工作的(學(xué)習(xí)?Introduction to CSS?和?Styling boxes.)
目標(biāo):	要了解網(wǎng)格布局系統(tǒng)背后的基本概念，以及如何在一個(gè)網(wǎng)頁(yè)上實(shí)現(xiàn)一個(gè)網(wǎng)格布局。

什么是網(wǎng)格布局?

網(wǎng)格是一系列簡(jiǎn)單的集合 of 水平的和垂直的線?creating a pattern against which we can line up our design elements. They help us to create designs where elements don’t jump around or change width as we move from page to page, providing greater consistency on our websites.

一個(gè)典型的網(wǎng)格具有 列, 行, 接著是每行和每列之間的間隙 — 通常被稱為溝槽.

[臨時(shí)圖; 將很快被更好的圖替換。]

在你的項(xiàng)目中使用一個(gè)"網(wǎng)格系統(tǒng)"

為了確保您的整個(gè)網(wǎng)站或應(yīng)用程序具有一致的體驗(yàn)，從一開(kāi)始就將其置于網(wǎng)格系統(tǒng)上，這意味著您不需要考慮某個(gè)元素相對(duì)于其他元素的寬度。 您的選擇限于"此元素將跨越的網(wǎng)格的多少列"。

你的"網(wǎng)格系統(tǒng)"只是一個(gè)決定，在設(shè)計(jì)過(guò)程中使用一個(gè)規(guī)則的網(wǎng)格。如果你的設(shè)計(jì)開(kāi)始在一個(gè)圖形編輯應(yīng)用程序，如Photoshop的生活，你可以創(chuàng)建一個(gè)網(wǎng)格，以參考在 "http://www.elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/"class ="external"> Elliot的更好的Photoshop網(wǎng)格的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) 杰伊股票。

你的網(wǎng)格系統(tǒng)也可能是一個(gè)框架 - 第三方或你只是為你的項(xiàng)目創(chuàng)建的 - 你用來(lái)通過(guò)CSS強(qiáng)制網(wǎng)格。

創(chuàng)建簡(jiǎn)單的網(wǎng)格框架

我們將會(huì)從如何為你的項(xiàng)目建立一個(gè)簡(jiǎn)單的網(wǎng)格框架開(kāi)始。

當(dāng)前創(chuàng)建網(wǎng)格布局的主要方法是使用float. 如果你已經(jīng)閱讀了?our previous article about floats, you’ve already seen how we can use this technique to create a multiple column layout — which is the essence of any grid system using this method.

最簡(jiǎn)單的網(wǎng)格布局是創(chuàng)建一個(gè)固定寬度的—我們只需要知道我們?cè)O(shè)計(jì)所需的總寬度，我們需要多少列，gutters和每一列都應(yīng)該有多寬。?If we instead decided to lay out our design on a grid with columns that grow and shrink according to browser width, we would need to calculate percentage widths for the columns and? gutters between them.

In the next sections we will look at how to create both. 我們將創(chuàng)建一個(gè)有十二列的網(wǎng)格— a very common choice that is seen to be very adaptable to different situations given that 12 is nicely divisible by 6, 4, 3, and 2.

一個(gè)簡(jiǎn)單的固定寬度網(wǎng)格

讓我們首先創(chuàng)建一個(gè)使用固定寬度列的網(wǎng)格系統(tǒng)。

首先制作樣本的本地副本 external"> simple-grid.html 文件，其中包含以下標(biāo)記。

<div class="wrapper">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
    <div class="col">7</div>
    <div class="col">8</div>
    <div class="col">9</div>
    <div class="col">10</div>
    <div class="col">11</div>
    <div class="col">12</div>
  </div>
  <div class="row">
    <div class="col span1">13</div>
    <div class="col span6">14</div>
    <div class="col span3">15</div>
    <div class="col span2">16</div>    
  </div>
</div>

目的是將其轉(zhuǎn)換為十行列網(wǎng)格上的兩行的演示網(wǎng)格 - 頂行顯示各列的大小，第二行顯示網(wǎng)格上的一些不同大小的區(qū)域。

;">

In the <style> element, add the following code, which first makes all the elements on the page sized as border boxes and then gives the wrapper container a width of 980 pixels, with padding on the right hand side of 20 pixels. This leaves us with 960 pixels for our total column/gutter widths.

* {
  box-sizing: border-box;
}
    

body {
  width: 980px;
  margin: 0 auto;
}

.wrapper {
  padding-right: 20px;
}

現(xiàn)在使用包圍在網(wǎng)格的每一行的行容器從另一行中清除一行。 在上一個(gè)規(guī)則下面添加以下規(guī)則:

.row {
  clear: both;
}

使用這個(gè)clear意味著我們不需要把每一行用元素填滿十二列，這些行仍會(huì)是分開(kāi)的，并且不會(huì)影響其他行。

列之間的間距為20像素寬。 我們?cè)诿苛械淖髠?cè)(包括第一列)創(chuàng)建這些水槽作為邊緣，以平衡容器右側(cè)的填充的20像素。 所以我們共有12個(gè)水槽 - 12×20 = 240。

我們需要從960像素的總寬度中減去它，為我們的列提供720像素。 如果我們現(xiàn)在把它除以12，我們知道每列應(yīng)該是60像素寬。

Our next step is to create a rule for the class .col,? floating it left, giving it a margin-left of 20 pixels to form the gutter, and a width of 60 pixels. Add the following rule to the bottom of your CSS:

.col {
  float: left;
  margin-left: 20px;
  width: 60px;
  background: rgb(255, 150, 150);
}

單列的頂行現(xiàn)在將整齊地排列為網(wǎng)格。

Layout containers that we want to span more than one column need to be given special classes to adjust their width values to the required number of columns (plus gutters in between). We need to create an additional class to allow containers to span 2 to 12 columns. Each width is the result of adding up the column width of that number of columns plus the gutter widths, which will always number one less than the number of columns.

在CSS的底部添加以下內(nèi)容:

/* Two column widths (120px) plus one gutter width (20px) */
.col.span2 { width: 140px; }
/* Three column widths (180px) plus two gutter widths (40px) */
.col.span3 { width: 220px; }
/* And so on... */
.col.span4 { width: 300px; }
.col.span5 { width: 380px; }
.col.span6 { width: 460px; }
.col.span7 { width: 540px; }
.col.span8 { width: 620px; }
.col.span9 { width: 700px; }
.col.span10 { width: 780px; }
.col.span11 { width: 860px; }
.col.span12 { width: 940px; }

創(chuàng)建這些類后，我們現(xiàn)在可以在網(wǎng)格上布置不同的寬度列。 嘗試保存并在瀏覽器中加載頁(yè)面以查看效果。

嘗試修改元素上的類，甚至添加和刪除一些容器，看看如何改變布局。 例如，您可以使第二行如下所示:

<div class="row">
  <div class="col span8">13</div>
  <div class="col span4">14</div>
</div>

現(xiàn)在你有一個(gè)網(wǎng)格系統(tǒng)工作，你可以簡(jiǎn)單地定義行和每一行的列數(shù)，然后填充每個(gè)容器所需的內(nèi)容。 大！

創(chuàng)建一個(gè)流式網(wǎng)格

我們的網(wǎng)格工作得很好，但它有一個(gè)固定的寬度。 我們真的需要一個(gè)靈活的(流體)網(wǎng)格，它會(huì)隨著瀏覽器中的可用空間而增長(zhǎng)和縮小 "view ="viewport:viewport表示當(dāng)前正在查看的計(jì)算機(jī)圖形中的多邊形(通常為矩形)區(qū)域。在web瀏覽器術(shù)語(yǔ)中，它指的是可見(jiàn)網(wǎng)站內(nèi)容占用的瀏覽器部分。 。 為了實(shí)現(xiàn)這一點(diǎn)，我們可以使用參考像素寬度并將其轉(zhuǎn)換為百分比。

將固定寬度變?yōu)殪`活的基于百分比的方程的方程如下。

target / context = result

對(duì)于我們的列寬，我們的目標(biāo)寬度為60像素，我們的上下文是960像素的包裝。 我們可以使用以下計(jì)算百分比。

60 / 960 = 0.0625

然后我們移動(dòng)小數(shù)點(diǎn)2個(gè)位置，給出我們的百分比6.25％。 因此，在我們的CSS中，我們可以替換60像素列寬度為6.25％。

我們需要對(duì)我們的溝槽寬度做同樣的事情:

20 / 960 = 0.02083333333

So we need to replace the 20 pixel margin-left on our .col rule and the 20 pixel padding-right on .wrapper with 2.08333333%.

Updating our grid

要開(kāi)始使用本部分，請(qǐng)制作您之前的示例頁(yè)面的新副本，或制作我們的 -layout / grids / simple-grid-finished.html"class ="external"> simple-grid-finished.html 代碼作為起點(diǎn)。

更新第二個(gè)CSS規(guī)則(使用 .wrapper 選擇器)，如下所示:

body {
  width: 90%;
  max-width: 980px;
  margin: 0 auto;
}

.wrapper {
  padding-right: 2.08333333%;
}

Not only have we given it a percentage width, we have also added a {cssxref("max-width")}} property in order to stop the layout becoming too wide.

接下來(lái)，更新第四個(gè)CSS規(guī)則(使用 .col 選擇器)，如下所示:

.col {
  float: left;
  margin-left: 2.08333333%;
  width: 6.25%;
  background: rgb(255, 150, 150);
}

現(xiàn)在來(lái)看稍微更費(fèi)力的部分 - 我們需要更新所有的 .col.span 規(guī)則，使用百分比而不是像素寬度。 這需要一點(diǎn)時(shí)間與計(jì)算器; 為了省你一些努力，我們已經(jīng)為你做了下面。

使用以下內(nèi)容更新CSS規(guī)則的底部塊:

/* Two column widths (12.5%) plus one gutter width (2.08333333%) */
.col.span2 { width: 14.58333333%; }
/* Three column widths (18.75%) plus two gutter widths (4.1666666) */
.col.span3 { width: 22.91666666%; }
/* And so on... */
.col.span4 { width: 31.24999999%; }
.col.span5 { width: 39.58333332%; }
.col.span6 { width: 47.91666665%; }
.col.span7 { width: 56.24999998%; }
.col.span8 { width: 64.58333331%; }
.col.span9 { width: 72.91666664%; }
.col.span10 { width: 81.24999997%; }
.col.span11 { width: 89.5833333%; }
.col.span12 { width: 97.91666663%; }

現(xiàn)在保存您的代碼，在瀏覽器中加載它，并嘗試更改視口寬度 - 您應(yīng)該看到列寬調(diào)整很好地適合。 大！

使用calc() 函數(shù)更容易的計(jì)算

你可以使用calc()函數(shù)在你的CSS中做數(shù)學(xué)計(jì)算—它允許你在CSS值中插入簡(jiǎn)單的數(shù)學(xué)公式來(lái)計(jì)算這些值究竟應(yīng)該是什么。在你有復(fù)雜的數(shù)學(xué)公式需要計(jì)算的時(shí)候它很重要，你甚至可以使用不同的單位進(jìn)行計(jì)算，例如"我希望這個(gè)元素的高度總是它父元素高度的100%減去50px". See this example from a MediaRecorder API tutorial.

無(wú)論如何，回到我們的網(wǎng)格！ 跨越網(wǎng)格的多個(gè)列的任何列具有6.25％的總寬度乘以跨越的列數(shù)加上2.08333333％乘以槽的數(shù)量(其將總是列數(shù)減去1)。 calc()函數(shù)允許我們?cè)趯挾戎祪?nèi)部執(zhí)行此計(jì)算，因此對(duì)于跨越4列的任何項(xiàng)目，我們可以執(zhí)行此操作，例如:

.col.span4 {
  width: calc((6.25%*4) + (2.08333333%*3));
}

嘗試使用以下代碼替換您的底部規(guī)則，然后在瀏覽器中重新加載它，看看是否得到相同的結(jié)果:

.col.span2 { width: calc((6.25%*2) + 2.08333333%); }
.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }
.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }
.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); }
.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); }
.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); }
.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); }
.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); }
.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); }
.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); }
.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }

語(yǔ)義與"非語(yǔ)義"網(wǎng)格系統(tǒng)

向您的標(biāo)記添加類來(lái)定義布局意味著您的內(nèi)容和標(biāo)記與其視覺(jué)呈現(xiàn)相關(guān)聯(lián)。 有時(shí)你會(huì)聽(tīng)到這種使用描述為"無(wú)意的"的CSS類，描述內(nèi)容的外觀，而不是描述內(nèi)容的類的語(yǔ)義使用，這是我們的 span2 代碼> span3 等，類。

These are not the only approach. You could instead decide on your grid and then add the sizing information to the rules for existing semantic classes. For example, if you had a <div> with a class of content on it that you wanted to span 8 columns, you could copy across the width from the span8 class, giving you a rule like so:

.content {
  width: calc((6.25%*8) + (2.08333333%*7));
}

在我們的網(wǎng)格中啟用偏移容器

我們創(chuàng)建的網(wǎng)格工作良好，只要我們想要啟動(dòng)所有的容器與網(wǎng)格的左手邊齊平。 如果我們想在第一個(gè)容器之前留下一個(gè)空的列空間 - 或者在容器之間，我們需要?jiǎng)?chuàng)建一個(gè)偏移類來(lái)添加一個(gè)左邊距到我們的網(wǎng)站，以推動(dòng)它在網(wǎng)格上。 更多數(shù)學(xué)！

讓我們?cè)囋囘@個(gè)。

從您之前的代碼開(kāi)始，或使用我們的 "> fluid-grid.html 文件作為起點(diǎn)。

讓我們?cè)贑SS中創(chuàng)建一個(gè)類，它將容器元素偏移一列寬度。 將以下內(nèi)容添加到CSS的底部:

.offset-by-one {
  margin-left: calc(6.25% + (2.08333333%*2));
}

或者如果你喜歡自己計(jì)算百分比，請(qǐng)使用這一個(gè):

.offset-by-one {
  margin-left: 10.41666666%;
}

您現(xiàn)在可以將此類添加到任何容器，您要在其左側(cè)留下一列寬的空白。 例如，如果您在HTML中有這個(gè):

<div class="col span6">14</div>

嘗試替換它

<div class="col span5 offset-by-one">14</div>

嘗試加載和刷新以查看差異，或查看我們的 html"class ="external"> fluid-grid-offset.html example(see it fluid-grid-offset.html"class ="external">運(yùn)行實(shí)時(shí))。 完成的示例應(yīng)如下所示:

;">

浮動(dòng)網(wǎng)格限制

當(dāng)使用這樣的系統(tǒng)時(shí)，您需要注意，您的總寬度加起來(lái)正確，并且您不包括在行包含比該行可能包含更多的列的元素。 由于浮動(dòng)工作方式，如果網(wǎng)格列的數(shù)量對(duì)于網(wǎng)格變得太寬，則末端上的元素將下降到下一行，打破網(wǎng)格。

還要記住，元素的內(nèi)容比它們占據(jù)的行更寬，它會(huì)溢出，看起來(lái)像一團(tuán)糟。

這個(gè)系統(tǒng)的最大限制是它基本上是一維的。 我們正在處理列，跨越列而不跨行元素。 這些舊的布局方法非常難以控制元素的高度，而沒(méi)有明確設(shè)置高度，這是一個(gè)非常不靈活的方法 - 它只有當(dāng)你能保證你的內(nèi)容將是一定的高度才有效。

Flexbox 網(wǎng)格?

如果您閱讀了有關(guān) flexbox 的上一篇文章，您可能認(rèn)為flexbox是創(chuàng)建網(wǎng)格系統(tǒng)的理想解決方案。 目前有任何數(shù)量的基于flexbox的網(wǎng)格系統(tǒng)可用，flexbox可以解決我們?cè)趧?chuàng)建上面的網(wǎng)格時(shí)已經(jīng)發(fā)現(xiàn)的許多問(wèn)題。

然而，flexbox從來(lái)沒(méi)有被設(shè)計(jì)為網(wǎng)格系統(tǒng)，并且在作為一個(gè)系統(tǒng)使用時(shí)提出了一系列新的挑戰(zhàn)。 作為一個(gè)簡(jiǎn)單的例子，我們可以采用上面使用的相同的示例標(biāo)記，并使用下面的CSS來(lái)設(shè)置 wrapper ， row 和 代碼>類:

body {
  width: 90%;
  max-width: 980px;
  margin: 0 auto;
}

.wrapper {
  padding-right: 2.08333333%;
}


.row {
  display: flex;
}

.col {
  margin-left: 2.08333333%;
  margin-bottom: 1em;
  width: 6.25%;
  flex: 1 1 auto;
  background: rgb(255,150,150);
}

您可以在自己的示例中嘗試這些替換，或查看我們的 html"class ="external"> flexbox-grid.html 示例代碼(參見(jiàn) -grid.html"class ="external"> running live )。

這里我們把每一行變成一個(gè)flex容器。 使用基于flexbox的網(wǎng)格，我們?nèi)匀恍枰校员阍试S我們添加小于100％的元素。 我們將該容器設(shè)置為 display:flex 。

On .col we set the flex property's first value (flex-grow) to 1 so our items can grow, the second value (flex-shrink) to 1 so the items can shrink, and the third value (flex-basis) to auto. As our element has a width set, auto will use that width as the flex-basis value.

在頂端，我們?cè)诰W(wǎng)格上獲得十二個(gè)整潔的盒子，并且它們隨著我們改變視口寬度而同樣地增長(zhǎng)和收縮。 然而，在下一行，我們只有四個(gè)項(xiàng)目，這些也從60px基礎(chǔ)增長(zhǎng)和收縮。 只有四個(gè)他們可以增長(zhǎng)比上面的行中的項(xiàng)目多，結(jié)果是他們都占據(jù)第二行相同的寬度。

;">

為了解決這個(gè)問(wèn)題，我們?nèi)匀恍枰覀兊?code> span 類，以提供一個(gè)寬度來(lái)替換 flex-basis 所使用的值。

他們也不尊重上面使用的網(wǎng)格，因?yàn)樗麄儾恢廊魏侮P(guān)于它。

Flexbox是一種一維設(shè)計(jì)。 它處理單個(gè)維度，即行或列。 我們不能為列和行創(chuàng)建嚴(yán)格的網(wǎng)格，這意味著如果我們要為網(wǎng)格使用flexbox，我們?nèi)匀恍枰獮楦?dòng)布局計(jì)算百分比。

在您的項(xiàng)目中，您可能仍然選擇使用flexbox\'grid\'，因?yàn)閒lexbox提供的額外對(duì)齊和空間分布能力超過(guò)浮動(dòng)。 但是，您應(yīng)該知道，您仍在使用工具，而不是它的設(shè)計(jì)目的。 所以你可能會(huì)覺(jué)得它讓你跳過(guò)額外的箍，得到你想要的最終結(jié)果。

第三方網(wǎng)格系統(tǒng)

現(xiàn)在我們了解了我們的網(wǎng)格計(jì)算背后的數(shù)學(xué)，我們是一個(gè)很好的地方看看一些第三方網(wǎng)格系統(tǒng)的共同使用。 如果你在網(wǎng)上搜索"CSS Grid框架"，你會(huì)發(fā)現(xiàn)一個(gè)巨大的選項(xiàng)列表可供選擇。 流行的框架，例如 Bootstrap 和 ">基金會(huì)包括網(wǎng)格系統(tǒng)。 還有獨(dú)立的網(wǎng)格系統(tǒng)，使用CSS或使用預(yù)處理器開(kāi)發(fā)。

讓我們來(lái)看看這些獨(dú)立系統(tǒng)之一，因?yàn)樗菔玖耸褂镁W(wǎng)格框架的常見(jiàn)技術(shù)。 我們將使用的網(wǎng)格是Skeleton的一部分，一個(gè)簡(jiǎn)單的CSS框架。

要開(kāi)始使用，請(qǐng)?jiān)L問(wèn) Skeleton網(wǎng)站，然后選擇"下載"以下載ZIP文件。 解壓縮此文件并將skeleton.css和normalize.css文件復(fù)制到一個(gè)新目錄中。

制作我們的 html- skeleton.html 文件，并將其保存在與骨架相同的目錄中，并規(guī)范化CSS。

在HTML頁(yè)面中包含骨架并規(guī)范化CSS，方法是在其頭部添加以下內(nèi)容:

<link href="normalize.css" rel="stylesheet">
<link href="skeleton.css" rel="stylesheet">

Skeleton不僅僅包括一個(gè)網(wǎng)格系統(tǒng) - 它還包含用于排版的CSS和其他可以用作起點(diǎn)的頁(yè)面元素。 我們現(xiàn)在將這些默認(rèn)值，但是 - 這是我們真正感興趣的網(wǎng)格在這里。

我們將使用類似的HTML到我們前面的例子。 在您的HTML內(nèi)文中添加以下內(nèi)容:

<div class="container">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
    <div class="col">7</div>
    <div class="col">8</div>
    <div class="col">9</div>
    <div class="col">10</div>
    <div class="col">11</div>
    <div class="col">12</div>
  </div>
  <div class="row">
    <div class="col">13</div>
    <div class="col">14</div>
    <div class="col">15</div>
    <div class="col">16</div>   
  </div>
</div>

To start using Skeleton we need to give the wrapper <div> a class of container — this is already included in our HTML. This centers the content with a maximum width of 960 pixels. You can see how the boxes now never become wider than 960 pixels.

You can take a look in the skeleton.css file to see the CSS that is used when we apply this class. The <div> is centered using auto left and right margins, and a padding of 20 pixels is applied left and right. Skeleton also sets the box-sizing property to border-box like we did earlier, so the padding and borders of this element will be included in the total width.

.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

如果元素在行內(nèi)部，則元素只能是網(wǎng)格的一部分，因此與我們前面的示例一樣，我們需要一個(gè)額外的< div> 或其他具有 row >嵌套在 content < div> 和我們實(shí)際的內(nèi)容容器< div> 之間。 我們已經(jīng)做到了這一點(diǎn)。

現(xiàn)在讓我們布置集裝箱。 骨架基于12列網(wǎng)格。 頂行框都需要一列類，以使它們跨一列。

現(xiàn)在添加這些，如下面的代碼段所示:

<div class="container">
  <div class="row">
    <div class="col one column">1</div>
    <div class="col one column">2</div>        
    <div class="col one column">3</div>
    /* and so on */
  </div>
</div>

接下來(lái)，給出第二行類上的容器，解釋它們應(yīng)該跨越的列數(shù)，如下:

<div class="row">
  <div class="col one column">13</div>
  <div class="col six columns">14</div>
  <div class="col three columns">15</div>
  <div class="col two columns">16</div>   
</div>

嘗試保存HTML文件并將其加載到瀏覽器中以查看效果。

如果你看看skeleton.css文件，你可以看到這是如何工作的。 例如，Skeleton對(duì)下面定義的樣式元素添加了"三列"類。

.three.columns { width: 22%; }

所有的Skeleton(或任何其他網(wǎng)格框架)正在設(shè)置預(yù)定義的類，您可以通過(guò)將它們添加到您的標(biāo)記使用。 這和你自己計(jì)算這些百分比的工作完全一樣。

正如你所看到的，當(dāng)使用Skeleton時(shí)，我們需要寫很少的CSS。 它處理所有的浮動(dòng)我們當(dāng)我們添加類到我們的標(biāo)記。 正是這種將布局的責(zé)任轉(zhuǎn)移到其他使網(wǎng)格系統(tǒng)的框架成為一個(gè)引人注目的選擇的能力！

骨架是比你可能遇到的一些框架更簡(jiǎn)單的網(wǎng)格系統(tǒng)。 大型框架(如Bootstrap和Foundation)中的網(wǎng)格為各種屏幕寬度提供了更多的功能和額外的斷點(diǎn)。 但是，它們都以類似的方式工作 - 通過(guò)向您的標(biāo)記添加特定類，您可以使用預(yù)定義網(wǎng)格控制元素的布局。

網(wǎng)格布局的原生CSS網(wǎng)格?

我們?cè)诒疚拈_(kāi)頭說(shuō)，CSS以前沒(méi)有一個(gè)真正的系統(tǒng)來(lái)創(chuàng)建網(wǎng)格布局，但這將改變。 雖然我們不能使用原生的CSS網(wǎng)格系統(tǒng)，但在未來(lái)一年，我們會(huì)看到 CSS_Grid_Layout"> CSS網(wǎng)格布局模塊。

目前，您只能使用我們將在瀏覽器中顯示您的技術(shù)，這些瀏覽器正在實(shí)現(xiàn)CSS網(wǎng)格布局"標(biāo)志后面" - 這意味著它目前已實(shí)現(xiàn)，但處于實(shí)驗(yàn)狀態(tài)，您需要開(kāi)啟使用。

例如，在Firefox中，您需要導(dǎo)航到 about:config 的URL，搜索 layout.css.grid.enabled 首選項(xiàng)，然后雙擊以啟用 CSS網(wǎng)格。 您可以訪問(wèn)網(wǎng)格示例，了解如何在其他瀏覽器中使用它。

我們看了上面的Skeleton Grid框架 - 像其他第三方網(wǎng)格甚至手工構(gòu)建的網(wǎng)格，它需要你添加< div> s以形成行，然后指定列數(shù) 在這些行將跨越。

使用CSS網(wǎng)格布局，您可以完全在CSS中指定網(wǎng)格，而不需要將這些幫助類添加到標(biāo)記。 讓我們看看我們的簡(jiǎn)單示例，看看我們將如何使用CSS Grid Layout創(chuàng)建相同的布局。

構(gòu)建一個(gè)原生網(wǎng)格

首先，請(qǐng)先創(chuàng)建 "external"> css-grid.html 文件。 它包含以下標(biāo)記:

<div class="wrapper">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
  <div class="col">6</div>
  <div class="col">7</div>
  <div class="col">8</div>
  <div class="col">9</div>
  <div class="col">10</div>
  <div class="col">11</div>
  <div class="col">12</div>
  <div class="col">13</div>
  <div class="col span6">14</div>
  <div class="col span3">15</div>
  <div class="col span2">16</div>       
</div>

這次我們有一個(gè)父代碼< div> 與 wrapper 類，然后所有的子元素只是直接出現(xiàn)在包裝器里面 - 沒(méi)有行元素。 我們已經(jīng)將一個(gè)類添加到應(yīng)該跨越多個(gè)列的項(xiàng)目。

Now add the following into the <style> element:

.wrapper {
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 20px;
}

.col {
  background: rgb(255,150,150);
}

Here we set the .wrapper rule so it is 90% of the body width, centered, and has a max-width of 960px.

Now for the CSS grid properties. We can declare a grid using the grid value of the display property, set up a gutter with the grid-gap property and then create a grid of 12 columns of equal width using grid-template-columns, the new repeat() function, and a new unit defined for grid layout — the fr unit.

fr 單位是分?jǐn)?shù)單位 - 它描述了網(wǎng)格容器中可用空間的一小部分。 如果所有列都是 1fr ，它們將占用相等的空間。 這消除了計(jì)算百分比以創(chuàng)建靈活網(wǎng)格的需要。

創(chuàng)建網(wǎng)格后，網(wǎng)格自動(dòng)布局規(guī)則將立即在這個(gè)網(wǎng)格上布置我們的框，我們得到一個(gè)十二列靈活的網(wǎng)格布局。

;">

To style the containers that span multiple column tracks on the grid we can use the grid-column property. To span 6 columns for example:

.span6 {
  grid-column: auto / span 6;
}

跨越3:

.span3 {
  grid-column: auto / span 3;
}

正斜杠之前的值是開(kāi)始行 - 在這種情況下，我們沒(méi)有明確設(shè)置，允許瀏覽器將項(xiàng)目放在下一個(gè)可用的行。 然后我們可以設(shè)置它跨越6，3或我們想要的許多行。

在CSS的底部添加以下內(nèi)容:

.span2 { grid-column: auto / span 2;}
.span3 { grid-column: auto / span 3;}
.span4 { grid-column: auto / span 4;}
.span5 { grid-column: auto / span 5;}
.span6 { grid-column: auto / span 6;}
.span7 { grid-column: auto / span 7;}
.span8 { grid-column: auto / span 8;}
.span9 { grid-column: auto / span 9;}
.span10 { grid-column: auto / span 10;}
.span11 { grid-column: auto / span 11;}
.span12 { grid-column: auto / span 12;}

嘗試保存和刷新，您會(huì)看到容器適當(dāng)?shù)乜缍鄠€(gè)列。 涼！

CSS網(wǎng)格是二維，因此布局的增長(zhǎng)和縮小元素保持水平和垂直排列。

您可以通過(guò)將以下內(nèi)容替換最后一個(gè)4 col < div> 來(lái)測(cè)試此操作:

<div class="col">13some<br>content</div>
<div class="col span6">14this<br>is<br>more<br>content</div>
<div class="col span3">15this<br>is<br>less</div>
<div class="col span2">16</div>

Here we've deliberately added in some line break (<br>) tags to force some of the columns to become taller than others. If you try saving and refreshing, you'll see that the columns adjust their height to be as tall as the tallest container, so everything stays neat and tidy.

最終的布局如下:

;">

其他不錯(cuò)的CSS網(wǎng)格特征

對(duì)于CSS網(wǎng)格，我們不需要通過(guò)邊距來(lái)抵消它們。 嘗試在您的CSS中進(jìn)行這些更改:

.content {
  grid-column: 2 / 8;
}

<div class="col span2 content">16</div>

容器16現(xiàn)在將跨越第2列到第8列，在下一個(gè)可用的行上。

我們可以像列一樣輕松跨越行:

.content {
  grid-column: 2 / 8;
  grid-row: 3 / 5;
}

容器16現(xiàn)在將跨越行3至5以及列2至8。

我們也不需要使用邊距偽造水槽或顯式計(jì)算它們的寬度 - CSS網(wǎng)格具有這個(gè)功能內(nèi)置的 grid-gap 屬性。

我們只是觸摸CSS Grid Layout可能的表面，但在本文的上下文中要理解的關(guān)鍵是，你不需要?jiǎng)?chuàng)建一個(gè)網(wǎng)格系統(tǒng)與網(wǎng)格 - 它是一個(gè)。 您可以編寫CSS，將項(xiàng)目直接放置到預(yù)定義的網(wǎng)格上。 這是第一次使用CSS是可能的，這將獲得更多的使用一次瀏覽器支持固化。

主動(dòng)學(xué)習(xí):編寫自己的簡(jiǎn)單網(wǎng)格

在 CSS布局簡(jiǎn)介中，我們包括了有關(guān) CSS表格的部分 >，其中包含一個(gè)簡(jiǎn)單的形式示例(請(qǐng)參閱 class ="external-icon external"> css-tables-example.html live示例，以及 style-box / box-model-recap / css-tables-example.html"class ="external-icon external">源代碼)。 我們希望您復(fù)制此示例，并執(zhí)行以下操作:

1. Remove the <div> elements inside the <form> — you no longer need these, as CSS Grids can handle placing the content on rows and columns for you.
2. Use the CSS grid properties to create a layout for your form as close to the original as you can get. You will have to set a width on the containing element, and think about how to set column gaps as well as row gaps.

概要

閱讀這篇文章后，你應(yīng)該已經(jīng)了解了網(wǎng)格布局和網(wǎng)格框架如何在CSS中工作。 你也已經(jīng)窺探未來(lái)的CSS網(wǎng)格，現(xiàn)在應(yīng)該明白，我們今天使用的網(wǎng)格框架本質(zhì)上是一個(gè)stopgap解決方案，直到我們有一個(gè)廣泛支持的本地方式在CSS中實(shí)現(xiàn)這一點(diǎn)。