码迷,mamicode.com
首页 > Web开发 > 详细

关于CSS/Grid Layout实例的理解

时间:2018-09-25 01:19:55      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:--   star   layout   highlight   play   最大值   项目   隐式   一个   

代码实例来自网络

.wrapper {
  display: grid;<!--创建一个网格容器,所有容器子结点自动成为容器项目-->
  grid-template-columns: repeat(3, 1fr);<!--创建重复的网格轨道,第一个参数定义网格轨道重复的次数为3,每个列宽为1fr-->
  grid-gap: 10px;<!--属性grid-gap是grid-row-gap和grid-column-gap的简写形式。行间隙和列间隙都是10px-->
  grid-auto-rows: minmax(100px, auto);<!--定义了隐式网格的行轨道的大小,最小值为100px,最大值为自动。-->
}
.one {
  grid-column: 1 / 3;<!--grid-column是grid-column-start和grid-column-end的简写,这里指定了grid-column-start为1/3-->
  grid-row: 1;<!--同上,指定grid-row-start为1-->
}
.two { 
  grid-column: 2 / 4;<!--指定grid-column-start为2/4-->
  grid-row: 1 / 3;<!--指定grid-row-start为1 / 3-->
}
.three {
  grid-column: 1;<!--指定grid-column-start为1-->
  grid-row: 2 / 5;<!--指定grid-row-start为2 / 5-->
}
.four {
  grid-column: 3;<!--指定grid-column-start为3-->
  grid-row: 3;<!--指定grid-row-start为3-->
}
.five {
  grid-column: 2;<!--指定grid-column-start为2-->
  grid-row: 4;<!--指定grid-row-start为4-->
}
.six {
  grid-column: 3;<!--指定grid-column-start为3-->
  grid-row: 4;<!--指定grid-row-start为4-->
}

 

关于CSS/Grid Layout实例的理解

标签:--   star   layout   highlight   play   最大值   项目   隐式   一个   

原文地址:https://www.cnblogs.com/Jaehwan/p/9697194.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!