Grid

基础

新单位 fr - A flexible length 可变长度，一份

grid-column-end: -2; 计数是按边算

grid-column-end: span 2; 相对值，占用两格

grid-column: 4 / 6 缩写语法

只指定头或尾时，只占一格

grid-area: 1/2/4/6 区域简写，row / col

不规则区域，可定义多个 grid-area 解决

css

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 18px;
}

css

.container {
  display: grid;
  grid-template-columns: 100px auto 200px;
}

css

.container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

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

.column-7 {
  grid-column: 4 / 11;
}