經過css格子布局一個簡單的頁面

柵格佈局的思想起源源自於印刷設計。柵格是用來將設計元素精肯定位到頁面上的的測量工具。這種想法常常被用在網頁上來進行內容組織和統一，提高用戶體驗。

網頁設計剛起步的時候，設計和佈局都是是至關簡單的， 一般包含頭部，側邊欄，內容區域和頁腳。如今，隨着網絡的演變，網頁的佈局也變得更加複雜，因此就出現了像切圖網 、切版這樣專門作前端的公司。咱們常常須要大量的內容區域，響應式設計，多頁面模板設計，以及許多其餘的。浮動和定位在實現這些設計的時候，是必不可少的。但浮動聽起來簡單，實際操做起來卻很棘手。

但接下來，咱們會介紹一種簡單的設計佈局。隨着CSS柵格佈局的不斷髮展，成爲設計師也會變得愈來愈容易。

CSS柵格兼容性

做爲一名設計師，須要瞭解網頁設計的將來。CSS柵格佈局將改變現有規則，爲設計師處理頭痛了許多年的定位。雖然目前還不是主流的作法，可是這是一件值得期待的事情。

在咱們真的深刻了解柵格佈局以前，要強調的一件事，瀏覽器並不廣泛支持， 但願這種工做方式在將來能夠獲得愈來愈多的瀏覽器支持。不過， 好消息是， 您能夠輕鬆地嘗試使用CSS柵格佈局，以及瞭解它是如何工做的。

在使用示例以前，請你確保你的瀏覽器支持。目前只有Internet Explorer 10+和 edge 支持。其餘的瀏覽器經過一些手段也能夠瀏覽，但由於它不是官網支持，因此你只能是不斷的去嘗試。（If you view the Can I Use documentation on CSS Grid Layouts, at the time of this post, you will notice little flag indicators. These show that you will need to be in 「flag mode.」）若是你邊使用Can I Use來查看柵格佈局的兼容性，邊看這篇文章，那麼你就能夠注意到每一個細節的不一樣。

當您在測試柵格佈局的時候，你須要作幾件事情幫助你正確地看到佈局。使用Chrome查看，你須要啓用「實驗性網絡平臺功能」。如何啓用呢？在Chrome 瀏覽器中打開chrome://flags 這個地址。當url 連接chrome://flags加載完畢以後，向下滾動頁面，找到該選項，設置爲「啓用實驗性網絡平臺功能」。

火狐也容許您查看柵格佈局，經過「layout.css.grid.enabled」參數設置。開啓方法相似於Chrome瀏覽器的說明。在Firefox瀏覽器中URL輸入 about:config。向下滾動頁面，設置爲啓用 「layout.css.grid.enabled」 。

若是你想立刻開始使用CSS柵格佈局，對於不支持它的瀏覽器還有一個變通方案。若是你熟悉polyfills的想法，那已經有解決方案了。若是你不熟悉polyfills，能夠利用瀏覽器後退，利用JavaScript的力量，容許現代的瀏覽器功能（例如CSS柵格佈局）在舊的瀏覽器運行。

Polyfills超出本教程範圍，但隨着愈來愈多的設計師開始使用這項技術，更多的polyfill 技術將會涌現。若是你準備嘗試，這裏是一個推薦的 polyfill option。請務必閱讀做者的文檔，瞭解有關如何使用它的詳細信息。

那麼，在承諾100%使用CSS柵格佈局以前，要確保使用的生產代碼，作一些深刻的測試。

CSS柵格佈局基本知識

經過利用CSS，柵格佈局將有助於您的網頁內容的呈現。這裏有一篇相對較新的定義的屬性的CSS柵格佈局規範 。這是學習柵格設計的一個很好的資源。CSS柵格設計有助於簡化的東西，使建立佈局更加容易。想象一下，柵格做爲一種結構，尺寸能夠被定義。

柵格的組成

行(lines)

在上圖中，有五條垂直線和三條水平線。線從1開始編號。示例中，垂直線從左至右，這取決於書寫方向。若是書寫方向是由右至左，順序就顛倒過來。能夠給線起名（可選），方便在CSS中引用。

軌道(tracks)

軌道是兩條平行線之間的空間。在圖中，有四個垂直軌道和兩個水平的軌道。這是線和軌道的共同結果。 線是記錄內容的起點和終點。軌道是內容真實存在的位置。

單元格(cells)

單元格是水平和垂直軌道的相交處。圖中有八個單元格。

面(areas)

單元格指定面的時候發揮做用。面是矩形形狀，能夠跨越多個單元格。像線同樣，面也能夠任意命名。如在圖中的幾個標籤：「A」，「B」，和「C」。

建立柵格佈局

用老方格紙，佈局以前，先勾勒輪廓。

HTML柵格

<div class="container">
  <div class="grid header">Header</div>
  <div class="grid sidebar">Sidebar</div>
  <div class="grid content">Main Content</div>
  <div class="grid extra">Extra Content</div>
  <div class="grid footer">Footer</div>
</div>

 

容器Container是很是重要的。容器內是用於顯示網站的不一樣的內容塊。內容塊的順序並不重要。接下來，咱們將使用CSS將它們按照咱們的佈局顯示。

CSS樣式

HTML完成後，咱們來寫CSS。給container設置display:grid 或者 display:inline-grid. 若是你但願設置塊級元素，那使用 display:grid ; 若是你但願設置成內聯元素， 那使用display:inline-grid。想了解更多細節，能夠查看文檔

.container {
  display: grid;
  grid-template-columns: 0.25fr 15px 0.75fr;
  grid-template-rows: auto 25px auto 25px auto 25px auto;

}

.grid {
  background-color: #444;
  color: #fff;
  padding: 25px;
  font-size: 3rem;
}

 

grid-template-columns和grid-template-rows屬性用於指定行和列的寬度。這個佈局定義了五列。15px是兩個元素之間的間距。第三列佔用0.25份的剩餘空間。一樣地，第五列佔用0.75份的剩餘空間。（疑問： 圖中根本沒有第五列啊，感受做者寫錯了）

There are responsive customizations that can be made, but this is a great step to take prior to that. It may seem like using pixel measurements would be limiting, however, using auto for the first row in grid-template-rows allows the row to expand as necessary based on the content inside it. The 25px row acts as a gutter.

對於響應式佈局這個規範是很便利的，若是使用像素，則會被限定死。第一行使用grid-template-rows來表示，隨着內容須要的變化而變化。設置padding 成 25 像素，與頭部留有間隙。

元素看起來很緊湊，但再加一些規範，元素將初具規模。

這個例子先放置的頭部，但元素位置能夠按您喜歡的任意順序擺放。若是你想從頁腳開始，也能夠。

咱們先從頭部開始，從列1開始到列4結束，從行1開始到行2結束，CSS看起來就像這樣：

.header {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}

 

您可能會注意到側邊欄被壓住了，咱們沒法看到它。咱們須要從新排列一下。在這種佈局,經過行的位置進行排列。以行做爲標準。頭部佔一行和二行的位置，側邊欄，從三行開始， 到六行結束。 頭部到第二行結束，側邊欄從第三行開始正好能夠顯示到頭部下面。要查看示例，請參見該項目Codepen。

咱們使用grid-column-start指定一個元素起始垂直線。在本例中,它將被設置爲3。grid-column-end表示一個元素的結束垂直線。在這種狀況下,這個屬性就等於四。其餘行值也用一樣的方式設置。側邊欄的位置是存在的,它只是覆蓋的內容區。

.sidebar {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 6;
  background: #a0c263;
}

 

主要內容在第三列開始，第四列結束。側邊欄和內容區域的頂部對齊，因此他們都從grid-row-start第三行開始。你可能想讓內容欄比側邊欄高不少。經過設置容器上的高度，假如400像素，這個時候，它就會比其它元素高不少。

.content {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
  background: #f5c531;
  height: 400px;
}

 

最後兩個內容區域是額外內容區域和頁腳。

.extra {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 5;
  grid-row-end: 6;
  background: #898989;
}

.footer {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 7;
  grid-row-end: 8;
  background: #FFA500;
}

 

響應式優點

佈局已經建立好了，彷佛很像一個「桌面」。那麼平板電腦和移動設備怎麼顯示？CSS柵格佈局加上媒體查詢能夠適應不一樣的屏幕尺寸。真正酷的是，你能夠在這些不一樣的媒體查詢範圍裏，改變內容區域。做爲一個設計師，這意味着你選擇什麼是最適合你的佈局在不一樣的斷點。例如，若是你想要將「次要內容」被放在「內容」區域之上，能夠指定正確的行和列。

/* For mobile phones: */
    .header {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
  }

  .extra {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
  }

  .content {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 5;
    grid-row-end: 6;
    background: #f5c531;
    height: 400px;
  }

 

經過設置成列1開始，列4結束，來設置成內容全寬。將「次要內容」顯示在了「內容」之上。

CSS柵格佈局是一種新型的佈局方式。正如你所看到的，這種方法很容易建立一個簡單的頁面佈局去運行。上面這個簡單的例子也能夠爲如何建立更復雜的佈局打下良好的基礎。假如這個技術得到普及，在設計各類設備和尺寸，佈局大小自定義的時候，這個技術會是一個優點。

 

原文連接： https://getflywheel.com/layout/css-grid-layouts-how-to/

翻譯：http://www.wenqie.cn/css-grid-layouts-how-to/