CSS 布局方案 Display:grid

容器属性

1.默认情况下，容器元素都是块级元素，但也可以设成行内元素。 display: grid 块级 div { display: inline-grid; } 行内 2.grid-template-columns 属性 （定义每一列的列宽，） grid-template-rows 属性 （定义每一行的行高。 ）

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
   或
   grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
  或
   grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
  或
  单元格的大小是固定的，但是容器的大小不确定。
  grid-template-columns: repeat(auto-fill, 100px);
  或
  比例关系，网格布局提供了fr关键字
  grid-template-columns: 1fr 1fr;
  grid-template-columns: 150px 1fr 2fr; （第一列的宽度为150像素，第二列的宽度是第三列的一半。）
  或
  minmax()函数产生一个长度范围
  grid-template-columns: 1fr 1fr minmax(100px, 1fr);
  或
  grid-template-columns: 100px auto 100px;
  或
  grid-template-columns: 70% 30%;
}

3.grid-row-gap（行间距） ，grid-column-gap（列间距） ，grid-gap（行间距和列间距） .container { grid-gap: 20px 20px; }

根据最新标准，上面三个属性名的grid-前缀已经删除，grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap。

4.grid-auto-flow ：row/ column/row dense/ column dense 默认的放置顺序是"先行后列" column dense，表示"先列后行"，并且尽量填满空格。 5.justify-items （设置单元格内容的水平位置（左中右））， align-items （属性设置单元格内容的垂直位置（上中下））， place-items 属性

.container {
  justify-items: start | end | center | stretch; 
  align-items: start | end | center | stretch;
}

place-items: start end; 6.justify-content (整个内容区域在容器里面的水平位置（左中右）) align-content (整个内容区域的垂直位置（上中下）) place-content

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

space-evenly 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

place-content属性是align-content属性和justify-content属性的合并简写形式。 place-content: space-around space-evenly;

项目属性

1.grid-column-start 属性， grid-column-end 属性， grid-row-start 属性， grid-row-end 属性

.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}

1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线。

还可以使用span关键字，表示"跨越"，即*左右边框（上下边框）*之间跨越多少个网格。

.item-1 { grid-column-start: span 2; } 2.grid-column 属性， grid-row 属性

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

3.justify-self 属性， align-self 属性， place-self 属性 justify-items属性的用法完全一致， 只作用于单个项目 place-self: center center;