Grid Layout

Posted 2021-01-08 l69-l54

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);    

//grid-template指网络模板，grid-template-columns属性指定网格列的轨道列表，通过指定的每个值来创建每列的列宽。使用repeat()可以创建重复的网格轨道。repeat()接受两个参数：第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨道的尺寸。fr是一个弹性尺寸单位，可以帮助我们创建一个弹性的网格轨道。它代表了网格容器中可用的空间。

  grid-gap: 10px;

//grid-gap是grid-row-gap和grid-column-gap两个属性的缩写，如果它指定了两个值，那么第一个值是设置grid-row-gap的值，第二个值设置grid-column-gap的值。如果只设置了一个值，表示行和列的间距相等，也就是说grid-row-gap和grid-column-gap的值相同。注意：grid-gap只能创建列与列或行与行之间的间距，但不能创建列和行与网格容器边缘的间距。间距可以设置任何非负值，长度值可以是px、%、em等单位值。

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

//grid-auto-rows属性指定隐式创建的网络行跟踪的大小。  通过minmax()函数来创建网络轨道的最小或最大尺寸。minmax()函数接受两个参数：第一个参数定义网络轨道的最小值，第二个参数定义网络轨道的最大值。可以接受任何长度值，也可以接受auto值。auto值允许网络轨道基于内容的尺寸拉伸或挤压。

}
.one {
  grid-column: 1 / 3;

//grid-column是grid-column-start和grid-column-end的简写。通过贡献一条线，一个跨度，或全无（自动），以它的网格位置，从而指定的直行开始和直行边缘指定网格列内的网格项的大小和位置其网络面积。如果只提供一个值，则指定了grid-column-start值；如果提供两个值，第一个是grid-column-start的值，第二个是grid-column-end的值，两者之间必须要用“/”隔开。（默认值为auto)
  grid-row: 1;

//grid-row是grid-row-start和grid-row-end的简写。通过贡献一条线，一个跨度，或全无（自动），以它的网格位置，从而指定的直列开始和直列边缘指定网格行内的网格项的大小和位置其网络面积。如果只提供一个值，则指定了grid-row-start值；如果提供两个值，第一个是grid-row-start的值，第二个是grid-row-end的值，两者之间必须要用“/”隔开。（默认值为auto)
  background: lavender;
}

*以下grid-column和grid-row与上述相同*
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  background: lavender;
}
.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;
}