grid 属性总结

一、容器属性

1、display: grid;

块级的网格布局。

2、display: inline-grid;

行内的网格布局。

3、grid-template-columns

指定列的宽度。

① grid-template-columns：10px 20px 30%;

设置列，有几个值就代表有几列，值就是相应列的宽度。

② grid-template-rows: 200px 200px 200px;

设置行，有几个值就代表有几行，值就是相应行的高度。

③ grid-template-columns: 100px 100px 100px;

固定值

④ grid-template-columns: 33.33% 33.33% 33.33%;

百分比

⑤ grid-template-columns: 150px 1fr 2fr;

第一列的宽度为150像素，第二列的宽度是第三列的一半。

⑥ grid-template-columns: 1fr 1fr;

表示两个相同宽度的列

⑦ grid-template-columns: repeat (3, 1fr);

第一个参数代表的是重复的次数，第二个参数代表的是每行/每列的具体的宽度/高度。

⑧ grid-template-columns: repeat(auto-fill, 100px);

表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。

⑨ grid-template-columns: 1fr 1fr minmax(100px, 1fr);

长度范围，minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。

⑩ grid-template-columns: 100px auto 100px;

由浏览器自己决定长度。

4、grid-row-gap 属性，grid-column-gap 属性，grid-gap 属性

① grid-row-gap: 20px;

设置行间距

② grid-column-gap: 20px;

设置列间距

③ grid-gap: 20px 20px;

简写形式，设置行间距、列间距。如果省略了第二个值，浏览器认为第二个值等于第一个值。

注意：上面三个属性名的grid-前缀已经删除，grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap

5、grid-auto-flow

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行。这个顺序由grid-auto-flow属性决定。

① grid-auto-flow: column;

顺序变成"先列后行"

6、justify-items 属性，align-items 属性，place-items 属性

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。

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

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

• start：对齐单元格的起始边缘。

• end：对齐单元格的结束边缘。

• center：单元格内部居中。

• stretch：拉伸，占满单元格的整个宽度（默认值）。

7、justify-content 属性，align-content 属性，place-content 属性

justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。

place-content属性是align-content属性和justify-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;
}

• start：对齐容器的起始边框。
• end：对齐容器的结束边框。
• center：容器内部居中。
• stretch：项目大小没有指定时，拉伸占据整个网格容器。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
• space-between：项目与项目的间隔相等，项目与容器边框之间没有间隔。
• space-evenly：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

二、项目属性

1、justify-self 属性，align-self 属性，place-self 属性

justify-self属性设置单元格内容的水平位置（左中右），align-self属性设置单元格内容的垂直位置（上中下），

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

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

• start：对齐单元格的起始边缘。

• end：对齐单元格的结束边缘。

• center：单元格内部居中。

• stretch：拉伸，占满单元格的整个宽度（默认值）。