grid

grid

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，可以看作是二维布局。

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

常用容器属性

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

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

//两列布局
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

//第一列的宽度为150像素，第二列的宽度是第三列的一半。
.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}

//grid-row-gap用于设置行间距，grid-column-gap用于设置列间距。
.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
//等价于
.container {
  grid-gap: 20px 20px;
}
//根据最新标准，上面三个属性名的grid-前缀已经删除，grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap。

//justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。
.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}
//place-items属性是align-items属性和justify-items属性的合并简写形式。
place-items: <align-items> <justify-items>;
place-items: start end;
justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。

未完待续…