CSS3 display: grid

Question

浏览器兼容性

Can i use

可以看到基本上主流浏览器都已经支持了，ie10 和 11 也可以通过前缀 -ms- 来获得兼容

准备

css repeat() ) css minmax() )

<div id="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
  <div class="item item-8">8</div>
  <div class="item item-9">9</div>
</div>

#container {
  display: grid;
}

可以看出子元素默认占父元素宽度的 100%

• display: inline-grid; : container 元素会变为行内元素，对 item 元素无影响
• 设为网格布局以后，容器子元素（项目）的 float 、 display: inline-block 、 display: table-cell 、 vertical-align 和 column-* 等设置都将失效。