/* auto-fill 倾向于容纳更多的列，所以如果在满足宽度限制的前提下还有空间能容纳新列，那么它会暗中创建一些列来填充当前行。即使创建出来的列没有任何内容，但实际上还是占据了行的空间。 */
.wrapper-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 1rem;
}

/* auto-fit 倾向于使用最少列数占满当前行空间，浏览器先是和 auto-fill 一样，暗中创建一些列来填充多出来的行空间，然后坍缩（collapse）这些列以便腾出空间让其余列扩张。*/
.wrapper-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 1rem;
}

/* Grid容器属性 */

.grid-container {
  display: grid;
}
.grid-container-inline {
  display: inline-grid;
}

/* 每一列列宽,每一行行高  pixels (px), fractions (fr), character width (ch), auto, none */
.grid-template-columns,
.grid-template-rows {
  grid-template-columns: 100px 100px 100px;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-columns: repeat(2, 100px 20px 80px);
  grid-template-columns: repeat(auto-fill, 100px);
  grid-template-columns: 1fr 1fr;
  grid-template-columns: 150px 1fr 2fr;
  grid-template-columns: 1fr 1fr minmax(100px, 1fr);
  grid-template-columns: 100px auto 100px;
  grid-template-columns: [c1 c1-other-name] 100px [c2] 100px [c3] auto [c4];

  grid-template-rows: 100px 100px 100px;
  grid-template-rows: 33.33% 33.33% 33.33%;
  grid-template-rows: repeat(3, 33.33%);
  grid-template-rows: repeat(2, 100px 20px 80px);
  grid-template-rows: repeat(auto-fill, 100px);
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

/* 设置浏览器自动创建多余网格的列宽和行高  */
.grid-auto-columns,
.grid-auto-rows {
  grid-auto-rows: 50px;
}

/* 间距 */
.grid-row-gap,
.grid-column-gap,
.grid-gap {
  grid-row-gap: 20px;
  grid-column-gap: 20px;

  /* grid-gap: <grid-row-gap> <grid-column-gap>; */
  gap: 20px 20px;
  grid-gap: 20px;
}

/* 区域, 区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为 区域名-start，终止网格线自动命名为 区域名-end */
.grid-template-areas {
  /* 划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格 */
  grid-template-areas:
    "a b c"
    "d e f"
    "g h i";

  /* 将9个单元格分成a、b、c三个区域 */
  grid-template-areas:
    "a a a"
    "b b b"
    "c c c";
  grid-template-areas:
    "header header header"
    "main main sidebar"
    "footer footer footer";

  /* 某些区域不需要利用，则使用"点"（.）表示 */
  grid-template-areas:
    "a . c"
    "d . f"
    "g . i";
}

/* 放置顺序 */
.grid-auto-flow {
  grid-auto-flow: row;
  grid-auto-flow: column;

  /* 尽可能紧密填满，尽量不出现空格 */
  grid-auto-flow: row dense;
  grid-auto-flow: column dense;
}

.grid-template,
.grid {
  /* grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。 */
  /* grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。 */
}

/* 单元格内容位置 */
.justify-items,
.align-items,
.place-items {
  /* justify-items属性设置单元格内容的水平位置（左中右）*/
  /* justify-items: start | end | center | stretch; */

  /* align-items属性设置单元格内容的垂直位置（上中下） */
  /* align-items: start | end | center | stretch; */

  /* place-items: <align-items> <justify-items>; */
}

/* 单元格内容位置 , 但只作用于单个项目 */
.justify-self,
.align-self,
.place-self {
  /* justify-self属性设置单元格内容的水平位置（左中右）*/
  /* justify-self: start | end | center | stretch; */

  /* align-self属性设置单元格内容的垂直位置（上中下） */
  /* align-self: start | end | center | stretch; */

  /* place-self: <align-self> <justify-self>; */
}

/* 整个内容区域在容器里面的位置 */
.justify-content,
.align-content,
.place-content {
  /* justify-content属性是整个内容区域在容器里面的水平位置（左中右） */
  /* justify-content: start | end | center | stretch | space-around | space-between | space-evenly; */

  /* align-content属性是整个内容区域的垂直位置（上中下） */
  /* align-content: start | end | center | stretch | space-around | space-between | space-evenly; */

  /* place-content: <align-content> <justify-content>; */
}

/* Grid项目属性 */

/* 项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。 */
.grid-column-start,
.grid-column-end,
.grid-row-start,
.grid-row-end {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 4;

  /* 可以使用网格线的名字 */
  grid-column-start: header-start;
  grid-column-end: header-end;

  /* "跨越"，即左右边框（上下边框）之间跨越多少个网格 */
  grid-column-start: span 2;
  grid-column-end: span 2;
}

.grid-column,
.grid-row {
  /* grid-column属性是grid-column-start和grid-column-end的合并简写形式 */
  /* grid-row属性是grid-row-start属性和grid-row-end的合并简写形式 */

  grid-column: 1 / 3;
  grid-row: 1 / 2;

  /* 等同于 */

  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;

  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  grid-column: 1;
  grid-row: 1;
}

/* 指定项目放在哪一个区域 */
.grid-area {
  grid-area: e;

  /* grid-area: <row-start> / <column-start> / <row-end> / <column-end>; */

  /* grid-area: 1 / 1 / 3 / 3; */
}