grid 布局

Posted 2020-06-10

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>