網(wǎng)格

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

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

網(wǎng)格是一系列簡單的集合 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.

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

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

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

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

你的"網(wǎng)格系統(tǒng)"只是一個決定，在設(shè)計過程中使用一個規(guī)則的網(wǎng)格。如果你的設(shè)計開始在一個圖形編輯應(yīng)用程序，如Photoshop的生活，你可以創(chuàng)建一個網(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)頁設(shè)計 杰伊股票。

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

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

我們將會從如何為你的項目建立一個簡單的網(wǎng)格框架開始。

當(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.

最簡單的網(wǎng)格布局是創(chuàng)建一個固定寬度的—我們只需要知道我們設(shè)計所需的總寬度，我們需要多少列，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)建一個有十二列的網(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.

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

讓我們首先創(chuàng)建一個使用固定寬度列的網(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)格的每一行的行容器從另一行中清除一行。 在上一個規(guī)則下面添加以下規(guī)則:

.row {
  clear: both;
}

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

列之間的間距為20像素寬。 我們在每列的左側(cè)(包括第一列)創(chuàng)建這些水槽作為邊緣，以平衡容器右側(cè)的填充的20像素。 所以我們共有12個水槽 - 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)格上布置不同的寬度列。 嘗試保存并在瀏覽器中加載頁面以查看效果。

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

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

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

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

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

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

target / context = result

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

60 / 960 = 0.0625

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

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

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

要開始使用本部分，請制作您之前的示例頁面的新副本，或制作我們的 -layout / grids / simple-grid-finished.html"class ="external"> simple-grid-finished.html 代碼作為起點。

更新第二個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.

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

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

現(xiàn)在來看稍微更費力的部分 - 我們需要更新所有的 .col.span 規(guī)則，使用百分比而不是像素寬度。 這需要一點時間與計算器; 為了省你一些努力，我們已經(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ù)更容易的計算

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

無論如何，回到我們的網(wǎng)格！ 跨越網(wǎng)格的多個列的任何列具有6.25％的總寬度乘以跨越的列數(shù)加上2.08333333％乘以槽的數(shù)量(其將總是列數(shù)減去1)。 calc()函數(shù)允許我們在寬度值內(nèi)部執(zhí)行此計算，因此對于跨越4列的任何項目，我們可以執(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)); }

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

向您的標(biāo)記添加類來定義布局意味著您的內(nèi)容和標(biāo)記與其視覺呈現(xiàn)相關(guān)聯(lián)。 有時你會聽到這種使用描述為"無意的"的CSS類，描述內(nèi)容的外觀，而不是描述內(nèi)容的類的語義使用，這是我們的 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)格工作良好，只要我們想要啟動所有的容器與網(wǎng)格的左手邊齊平。 如果我們想在第一個容器之前留下一個空的列空間 - 或者在容器之間，我們需要創(chuàng)建一個偏移類來添加一個左邊距到我們的網(wǎng)站，以推動它在網(wǎng)格上。 更多數(shù)學(xué)！

讓我們試試這個。

從您之前的代碼開始，或使用我們的 "> fluid-grid.html 文件作為起點。

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

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

或者如果你喜歡自己計算百分比，請使用這一個:

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

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

<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īng)如下所示:

;">

浮動網(wǎng)格限制

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

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

這個系統(tǒng)的最大限制是它基本上是一維的。 我們正在處理列，跨越列而不跨行元素。 這些舊的布局方法非常難以控制元素的高度，而沒有明確設(shè)置高度，這是一個非常不靈活的方法 - 它只有當(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可以解決我們在創(chuàng)建上面的網(wǎng)格時已經(jīng)發(fā)現(xiàn)的許多問題。

然而，flexbox從來沒有被設(shè)計為網(wǎng)格系統(tǒng)，并且在作為一個系統(tǒng)使用時提出了一系列新的挑戰(zhàn)。 作為一個簡單的例子，我們可以采用上面使用的相同的示例標(biāo)記，并使用下面的CSS來設(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 示例代碼(參見 -grid.html"class ="external"> running live )。

這里我們把每一行變成一個flex容器。 使用基于flexbox的網(wǎng)格，我們?nèi)匀恍枰?，以便允許我們添加小于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.

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

;">

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

他們也不尊重上面使用的網(wǎng)格，因為他們不知道任何關(guān)于它。

Flexbox是一種一維設(shè)計。 它處理單個維度，即行或列。 我們不能為列和行創(chuàng)建嚴(yán)格的網(wǎng)格，這意味著如果我們要為網(wǎng)格使用flexbox，我們?nèi)匀恍枰獮楦硬季钟嬎惆俜直取?/p>

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

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

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

讓我們來看看這些獨立系統(tǒng)之一，因為它演示了使用網(wǎng)格框架的常見技術(shù)。 我們將使用的網(wǎng)格是Skeleton的一部分，一個簡單的CSS框架。

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

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

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

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

Skeleton不僅僅包括一個網(wǎng)格系統(tǒng) - 它還包含用于排版的CSS和其他可以用作起點的頁面元素。 我們現(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)格的一部分，因此與我們前面的示例一樣，我們需要一個額外的< div> 或其他具有 row >嵌套在 content < div> 和我們實際的內(nèi)容容器< div> 之間。 我們已經(jīng)做到了這一點。

現(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>

接下來，給出第二行類上的容器，解釋它們應(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對下面定義的樣式元素添加了"三列"類。

.three.columns { width: 22%; }

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

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

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

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

我們在本文開頭說，CSS以前沒有一個真正的系統(tǒng)來創(chuàng)建網(wǎng)格布局，但這將改變。 雖然我們不能使用原生的CSS網(wǎng)格系統(tǒng)，但在未來一年，我們會看到 CSS_Grid_Layout"> CSS網(wǎng)格布局模塊。

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

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

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

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

構(gòu)建一個原生網(wǎ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>

這次我們有一個父代碼< div> 與 wrapper 類，然后所有的子元素只是直接出現(xiàn)在包裝器里面 - 沒有行元素。 我們已經(jīng)將一個類添加到應(yī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 ，它們將占用相等的空間。 這消除了計算百分比以創(chuàng)建靈活網(wǎng)格的需要。

創(chuàng)建網(wǎng)格后，網(wǎng)格自動布局規(guī)則將立即在這個網(wǎng)格上布置我們的框，我們得到一個十二列靈活的網(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;
}

正斜杠之前的值是開始行 - 在這種情況下，我們沒有明確設(shè)置，允許瀏覽器將項目放在下一個可用的行。 然后我們可以設(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;}

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

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

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

<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.

最終的布局如下:

;">

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

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

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

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

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

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

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

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

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

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

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

在 CSS布局簡介中，我們包括了有關(guān) CSS表格的部分 >，其中包含一個簡單的形式示例(請參閱 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)窺探未來的CSS網(wǎng)格，現(xiàn)在應(yīng)該明白，我們今天使用的網(wǎng)格框架本質(zhì)上是一個stopgap解決方案，直到我們有一個廣泛支持的本地方式在CSS中實現(xiàn)這一點。