css3 Grid栅格系统

Grid 栅格系统的使用

定义容器

.coninater {
     display: grid;
}

多种方式定义单格

1. 按百分比划分

.coninater {
     display: grid;
	 grid-template-rows: 50% 50%;
     grid-template-columns: 20% 20% 20% 20% 20%;
}

2. 按比例划分

.coninater {
     display: grid;
	 grid-template-rows: repeat(3, 1fr);
     grid-template-columns: repeat(3, 1fr);
}

3. 自动填充

.coninater {
     display: grid;
	 grid-template-rows: repeat(auto-fill, 100px);
     grid-template-columns: repeat(auto-fill, 100px);
}

4. minmax 控制行范围的波动

.coninater {
     display: grid;
	 grid-template-rows: repeat(2, minmax(50px, 100px));
     grid-template-columns: repeat(3, 1fr);
}

栅格间距

.coninater {
     display: grid;
	 grid-template-rows: repeat(3, 1fr);
     grid-template-columns: repeat(3, 1fr);
	 row-gap: 10px;
     column-gap: 10px;
     gap: 10px 10px;
}

根据栅格线编号放置元素

.container {
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: 2;
    grid-column-end: 4;
}
/* 左左右 */
.container {
    grid-row-start: 1;
    grid-column-start: 1;
    gird-row-end: 3;
    gird-column-end: 2;
}

为栅格命名

.contanier {
    grid-template-rows: repate(3, [r-start] 1fr [r-end]);
	grid-template-columns: repate(3, [c-start] 1fr [c-end]);
}
div:first-child {
    grid-row-start: r-start 1;
    gird-column-start: c-start 1;
    gird-column-end: c-end 3;
    gird-row-end: r-end 1;
}

偏移元素

/* 元素居中显示 */
.container {
    grid-template-rows: repate(3, 1fr);
    grid-template-column: repate(3, 1fr);
}
div: first-child {
    grid-row-start: 2;
    grid-column-start: 2;
    grid-column-end: span 1;
    grid-colum-end: span 1;
}

元素定位简写

/* 元素居中显示 */
/* 元素居中显示 */
.container {
    grid-template-rows: repate(3, 1fr);
    grid-template-column: repate(3, 1fr);
}
div: first-child {
    grid-row: 2 / span 1;
    grid-column: 2 / span 1;
}

使用区域定位

/* 元素居中显示 */
.container {
    grid-template-rows: repate(3, 1fr);
    grid-template-column: repate(3, 1fr);
}
div: first-child {
    grid-area: 2/2/3/3;
}