grid 佈局 CSS3

display：grid 是一種新的佈局方式，舊的佈局方式一般有反作用，例如float（須要額外修復浮動）或者inline-block（兩個元素之間的空格問題）

 

把父元素定義爲grid，就像表格同樣，而後就能夠給他的子元素定義各自佔的行和列

.area {

     display: -ms-grid; /* prefix for IE 10 */

     display: grid; /* or inline-grid */

}

 

不須要改動標籤就能夠經過純css實現表格佈局

 

目前只有ie10支持

 

相關屬性（有些用於父元素，有些則用於子元素）：

grid-row / grid-column

grid-row-align / grid-column-align

grid-row-span / grid-column-span

grid-rows / grid-columns

 

這裏面有個特別的單位：fr    相似於百分比

官方定義：the distribution of fractional space occurs after all 'length' or content-based row and column sizes have reached their maximum.

 

 

下面這些屬性尚未任何瀏覽器支持：

grid-template: allows grid definition through a template of identifiers

grid-column-position: current grid-column since grid-column is supposed to be a shorthand for grid-column-position and grid-column-span

grid-row-position: same as above

grid-position: shorthand for grid-column-position and grid-row-position

grid-span: shorthand for grid-column-span and grid-row-span

grid-area: shorthand for grid-column-position, grid-row-position, grid-column-span and grid-row-span

grid-auto-columns: change default size for columns

grid-auto-rows: change default size for rows

grid-auto-flow: allows grid-items to automatically flow in available cells

 

 

例子：

* { box-sizing: border-box; }

html, body {
  height: 100%;

}

body {
  padding: 10px;
  display: -ms-grid;
  -ms-grid-columns: 200px 15px 1fr 15px 100px;
  -ms-grid-rows: auto 15px auto 15px auto;

}

.content {
  background: beige;
  padding: 0;

}

.header {
  background: tomato;
  -ms-grid-column-span: 5;
  -ms-grid-row: 1;

}

.footer {
  background: deepskyblue;
}

.footer {
  background: deepskyblue;
  -ms-grid-row: 5;
  -ms-grid-column-span: 5;

}

.main {
  background: orangered;
  -ms-grid-column: 3;
  -ms-grid-row: 3;

}

.sidebar {
  background: lightgreen;
  -ms-grid-column: 1;
  -ms-grid-row: 3;

}

.ads {
  background: gold;
  -ms-grid-column: 5;

  -ms-grid-row: 3;

}

h2 {
  margin-top: 0;

}

img {
  display: block;
  max-width: 100%;
  width: auto;
  margin: 0 auto 10px;

}

div {
  color: white;
  padding: 10px;

}

p {
  margin: 0 0 1em 0;

}

@media all and (max-width: 600px) {
  body {
    -ms-grid-columns: 1fr;
    -ms-grid-rows: auto (1% auto)[4];

  }

  .header, .ads, .sidebar, .main, .footer {
    -ms-grid-column: 1;

  }

  .header  { -ms-grid-row: 1; }
  .ads     { -ms-grid-row: 3; }
  .main    { -ms-grid-row: 5; }
  .sidebar { -ms-grid-row: 7; }

  .footer  { -ms-grid-row: 9; }

  .ads {
    display: -ms-grid;
    -ms-grid-columns: 1% (32% 1%)[3];
    -ms-grid-rows: 2;

  }

  .ads h2 { -ms-grid-row: 1; -ms-grid-column-span: 3; }
  .ads img { margin: 0; -ms-grid-row: 2; }
  .ads img:nth-of-type(1) { -ms-grid-column: 2; }
  .ads img:nth-of-type(2) { -ms-grid-column: 4; }
  .ads img:nth-of-type(3) { -ms-grid-column: 6; }

}

<div class="sidebar"><h2>Sidebar</h2></div>

<div class="main">
   <h2>Main</h2>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 

</div>

<div class="footer"><h2>Footer</h2></div>

<div class="header"><h2>Header</h2></div>

<div class="ads">
  <h2>Ads</h2>
  <img src="http://lorempixel.com/200/200/business/" />
  <img src="http://lorempixel.com/200/200/city/" />
  <img src="http://lorempixel.com/200/200/animals/" />

</div>