第三周web作业2：grid layout

代码：

.wrapper {/*类名*/
  display: grid;/*规定为网格属性*/
  grid-template-columns: repeat(3, 1fr);/*定义的行名称和跟踪的大小功能网格列*//*repeat重复布局 repeat(3, 1fr)效果等同于1fr 1fr 1fr */
  grid-gap: 10px;/*此属性用来创建列与列，行与行之间的间距，只设置了一个值，表示行和列的间距相等*/
  grid-auto-rows: minmax(100px, auto);/*属性指定隐式创建的网格行跟踪的大小，通过显式定位到超出范围的行，或者通过自动布局算法创建额外的行来实现。*//*minmax定义大于或等于 min 且小于或等于 max 的大小范围。在此最小为100像素，最大为自适应*/
}
.one {
  grid-column: 1 / 3; /*规定网格中每个列的宽度*//*1/3表示从第一格网格线开始，到第三网格线为止*/
  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;
}

 

转载于:https://www.cnblogs.com/black-tea/p/9726211.html