grid-layout

转载于 2018-09-24 10:35:00 发布 · 96 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/misubishi/p/9694931.html

<!-- 创建三个网格布局-->
.wrapper {
    <!--创建一个网格布局 -->
  display: grid;
  <!--创建3列 且每列都等距    -->
  grid-template-columns: repeat(3, 1fr);
  <!--网格行列之间的距离是10px-->
  grid-gap: 10px;
  <!--网格项位于未明确指定大小的行中 则会创建grid-auto-rows来保存它,最小的宽度是100px -->
  grid-auto-rows: minmax(100px, auto);
}
<!-- -->
.one {
    <!--此网格列是1到3-->
  grid-column: 1 / 3;
  <!--此网格的行网格线是1-->
  grid-row: 1;
}
.two { 
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}