Gird布局基本属性 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第8天

关键字：

**Display**： grid || inline-gird; **Grid-template-rows:** 100px 100px 100px(三行) || repeat(3, 33.33%) || [r1] 100px [r2] 100px [r3] auto [r4]\

**Grid-template-columns:** 100px 100px 100px(三列) || repeat(3, 33.33%)repeat(auto-fill, 100px) || (fr为比例大小) 150px 1fr 2fr (第一列固定，后两列为1：2) || 表示列宽不小于100px不大于1fr 1fr 1fr minmax(100px, 1fr) || auto关键字表示由浏览器自己决定长度。 100px auto 100px; 网格线的名称： [c1] 100px [c2] 100px [c3] auto [c4]
网格布局允许同一根线有多个名字，比如[fifth-line row-5] Row-gap:20px 行间距 Rolumn-gap:20px 列间距 【合并写法】 **Gap**:``<grid-row-gap> <grid-column-gap>;

**grid-template-areas:** 'a b c' 'a a a' 'a . a' 'd e f' 'b b b' 'b . b' 'g h i' 'c c c' 'c . c'

注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。 比如，区域名为header，则起始位置的水平网格线和垂直网格线叫做header-start，终止位置的水平网格线和垂直网格线叫做header-end。 **grid-auto-flow:** column （从上到下排列） || row (默认) || row dense (先行后列且排满) || column dense(先列后行且排满);

**justify-items**属性设置单元格内容的水平位置（左中右）， **align-items**属性设置单元格内容的垂直位置（上中下）。 **place-items: <align-items> <justify-items>;**属性是align-items属性和justify-items属性的合并简写形式。如果省略第二个值，则浏览器认为与第一个值相等。

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

这两个属性的写法完全相同，都可以取下面这些值。

start：对齐单元格的起始边缘。 end：对齐单元格的结束边缘。 center：单元格内部居中。 stretch：拉伸，占满单元格的整个宽度（默认值）。

**justify-content**属性是整个内容区域在容器里面的水平位置（左中右）， **align-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;
}

**place-content**属性是align-content属性和justify-content属性的合并简写形式。

place-content:

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

//这四个属性的值，除了指定为第几个网格线，还可以指定为网格线的名字。
.item-1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}

//这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。
.item-1 {
  grid-column-start: span 2;
}

**使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序。

grid-column**属性是grid-column-start和grid-column-end的合并简写形式，
**grid-row**属性是grid-row-start属性和grid-row-end的合并简写形式。

.item {
  **grid-column:** <start-line> / <end-line>;
  **grid-row:** <start-line> / <end-line>;
}

.item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

**grid-area**属性指定项目放在哪一个区域。

.item-1 { grid-area: e; }

grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。

.item { grid-area: / / / ; }

**justify-self**属性设置单元格内容的水平位置（左中右）

**align-self**属性设置单元格内容的垂直位置（上中下）

.item { justify-self: start | end | center | stretch; align-self: start | end | center | stretch; }

这两个属性都可以取下面四个值。

start：对齐单元格的起始边缘。 end：对齐单元格的结束边缘。 center：单元格内部居中。 stretch：拉伸，占满单元格的整个宽度（默认值）。

**place-self**属性是align-self属性和justify-self属性的合并简写形式。

place-self: ;

下面是一个例子。

place-self: center center;

如果省略第二个值，place-self属性会认为这两个值相等。