web第五周

Posted 2021-01-12 enmmmm

wrapper {                                                   
  display: grid;                                             /*通过display属性设置属性值为grid,网格容器中的所有子元素就会自动变成网格项目（grid item）*/
  grid-template-columns: repeat(3, 1fr);    /*该属性可连续创建的网格轨道，repeat()接受两个参数：第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨                                                                     道的尺寸。*/
  grid-gap: 10px;                                       /*创建网格之间的间隙*/
  grid-auto-rows: minmax(100px, auto);  /*创建网格轨道的最小或最大尺寸。minmax()函数接受两个参数：第一个参数定义网格轨道的最小值，第二个参数定义网格轨       }                                                            道的最大值，也接受auto值。auto值允许网格轨道基于内容的尺寸拉伸或挤压。*/
.one {
  grid-column: 1 / 3;              /*网格的开始和结束线，如果只提供一个值，则指定了grid-row-start(grid-column-start)值；如果提供两个值，第一个值是grid-row-start                                                   (grid-column-start)的值，第二个值是grid-row-end(grid-column-end)的值，两者之间必须要用/隔开,而start和end通过网格线可以定位网格项                                               目。网格线实际上是代表线的开始、结束，两者之间就是网格列或行。每条线是从网格轨道开始，网格的网格线从1开始，每条网格线逐     grid-row: 1;                             步增加1，后面的two three four也是一样的道理。
}
.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;