5th week blog

.wrapper {

  display: grid;

  /*display 属性规定元素应该生成的框的类型*/

  grid-template-columns: repeat(3, 1fr);

  /*设置网格为3列；

  fr 单位是一个自适应单位，fr单位被用于在一系列长度值中分配剩余空间，

  如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配；

  repeat为重复片段，允许重复大量 列 的片段*/

  grid-gap: 10px;

  /*设置网格间隙为10像素*/

  grid-auto-rows: minmax(100px, auto);

  /*定义了最小值为100像素，最大值设为自动*/

}

.one {

  grid-column: 1 / 3;

  /*占用列的位置，从第一到第三列*/

  grid-row: 1;

  /*占用行的位置*/

  opacity:0.6;

  /*设置透明度方便观察*/

  background: #408353;

  /*设置背景色便于观察*/

}

.two {

  grid-column: 2 / 4;

  grid-row: 1 / 3;

  /*占用行的位置，从第一到第三行*/

  opacity:0.6;

  background: #543634;

}

.three {

  grid-column: 1;

  grid-row: 2 / 5;

  opacity:0.6;

  background: #634653;

}

.four {

  grid-column: 3;

  grid-row: 3;

  opacity:0.6;

  background: #744143;

}

.five {

  grid-column: 2;

  grid-row: 4;

  opacity:0.6;

  background: #624642;

}

.six {

  grid-column: 3;

  grid-row: 4;

  opacity:0.6;

  background: #532535;

}

转载于:https://www.cnblogs.com/renee87/p/9783122.html