设为网格布局以后,容器子元素(项目)的 float、display: inline-block、display: table-cell、vertical-align 和 column-* 等设置都将失效
指定一个三行三列的网格,列宽为百分比行高为像素
.container {
display: grid;
grid-template-columns: 33.3% 33.3% 33.3%;
grid-template-rows: 100px 100px 100px;
}
使用 repeat 函数指定一个六行三列的网格
.container {
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(2, 100px 50px 100px);
}
使用 auto-fill 实现自动填充
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}
使用 fr 实现等分或倍等分
.container {
display: grid;
grid-template-columns: 100px 1fr 1fr;
}
给网格线命名,方便以后引用
.container {
display: grid;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1 first-line] 100px [r2] 100px [r3] auto [r4];
}
设置行列间距
.container {
grid-row-gap: 20px;
grid-column-gap: 10px;
/* 或者合写 */
grid-gap: 20px 10px;
}
指定 area,方便以后引用,用不到的区域用 . 代替
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a . c' 'd e f' 'g h i';
}
设置网格的排列顺序
.container {
display: grid;
grid-auto-flow: row | column | row-dense | column-dense
}
设置单元格内容的水平、垂直位置
.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
/* 或者合写 */
place-items: <align-items> <justify-items>;
}
设置整个内容区域在容器里面的水平、垂直位置
.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>
}
设置浏览器自动创建的多余网格的列宽和行高
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-auto-rows: 50px;
}
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 的合写
根据第几条网格线或网格线名称指定项目的位置
.item {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: footer-end;
}
/* 或者合写 */
.item {
grid-column: 1 / 3;
grid-row: 2 / footer-end;
}
利用 span 设置跨越两个网格
.item {
grid-column-start: span 2;
/* 等同于 */
grid-column-end: span 2;
}
根据 上文的 area 指定项目的位置
.item {
grid-area: e;
/* 或者 */
grid-area: <row-start> / <column-start> / <row-end> / <column-end>
}
设置单元格内容的水平、垂直位置,跟 justify-items 属性的用法一致,但只作用于单个项目
.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
/* 或者合写 */
place-self: <align-self> <justify-self>;
}