grid初识

2018-04-05 本文已影响9人海娩

grid布局是一个二维的基于网格的布局系统，这是个非常强大的css模块，然而有个令人伤心的话题就是兼容性问题，一个兼容性否定了他的推广，然而，这并不影响我们的学习，因为，只是时间问题。
兼容性可以看这个网站
can i use

image.png

话不多说，开始学习吧
先创建一个html文件

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

然后开始我们最基础的两个性质

grid-template-columns

     .container {
        display: grid;
        height: 100px;
        grid-template-columns: 20px auto 20px;
        border: 1px solid;
    }
    .item {
        border: 1px solid;
    }
    .is-one {
        background: rebeccapurple;
    }

image.png

从最基本的我们可以看出，其实这个grid跟flexbox挺像的，是在父元素设置子元素的排列方式，然后子元素就会有统一的布局，如果子元素再有一些不一样的布局，也可以自己改。
另外，有没有瞬间又觉得很方便了，做两栏布局三栏布局甚至四栏五栏六栏都是so easy 的事情了呀。什么自适应都是so easy啦

grid-template-rows

就把上面的grid-template-columns属性换个属性名。

image.png

grid-template-areas

通过引用 grid-area属性指定的网格区域的名称来定义网格模板。
重复网格区域的名称导致内容扩展到这些单元格。

点号表示一个空单元格。语法本身提供了网格结构的可视化

<style>
  .container {
      display: grid;
      height: 200px;
      grid-template-columns: 50px auto 50px;
      grid-template-rows: 10% auto 10%;
      grid-template-areas: 
      "header header header"
      "content content sidebar"
      "footer footer footer";
      border: 1px solid;
  }
  .item {
      border: 1px solid;
  }
  .is-header {
      grid-area: header;
      background: #CAA5EE;
  }
  .is-content {
      grid-area: content;
      background: #a395ba;
  }
  .is-sidebar {
      grid-area: sidebar;
      background: yellow;
  }
  .is-footer {
      grid-area: footer;
      background: #CAA5EE;
  }
  </style>
  <div class="container">
      <div class="item is-header"></div>
      <div class="item is-content"></div>
      <div class="item is-sidebar"></div>
      <div class="item is-footer"></div>
  </div>