一、容器属性
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:拉伸,占满单元格的整个宽度(默认值)。