【笔记】【CSS】grid布局-Grid Garden练习笔记

前言：

此笔记为本人完成Grid Garden所有练习之后，对grid布局（网格布局）的复盘。

笔记中有些个人理解后整理的笔记，可能有所偏差，也恳请读者帮忙指出，谢谢。

前端路线图：Frontend Developer

网格布局练习网站推荐：Game for learning CSS Grid

脚步再小，每一步都算数。

---

什么是grid布局？

• 是一个基于网格的二维布局系统
• Grid 布局只对项目生效。
• 注意：column, float, clear和vertical-align对网格容器没有效果。

启用网格容器

div {
  display: grid;
}

布局属性

注意：上图中组合属性的属性值需要设置最小子属性的值。

grid-column-start:

属性值	含义	例子
正值	左边第几列开始	1（左边第1列）
负值	右边第几列开始	-2（右边第1列）

注意：grid-column-start属性的负值与grid-column-end属性的负值不同。

示例：

/*从左起第3列开始*/
grid-column-start:3;

/*从右起第2列开始*/
grid-column-start:-3;

grid-column-end:

属性值	描述	例子
正值	到左边第几列结束
负值	到右边第几列结束	-2（右边第2列）

grid-column-start和grid-column-end一起使用时，值最小当下限，值最大当上限。

示例：start比end小

/*从第1列开始，到第4列结束，不包括第4列*/
#water {
    grid-column-start: 1;
	grid-column-end:4
}

效果：

示例：start比end大

/*从第2列开始，到第5列结束，不包括第5列*/
#water {
  	grid-column-start: 5;
	grid-column-end:2;
}

效果：

~:span

注意~省略grid-column-start属性或grid-column-end属性

• span指定所要跨越的宽度
• span只能是正值

示例：

/*结合grid-column-end使用*/
#water {
  	grid-column-start: 2;
	grid-column-end:span 2;
}

效果：

示例：

/*结合grid-column-start使用*/
#water {
	grid-column-start:span 3;
  	grid-column-end: 6;
}

grid-column:

• grid-column相当于grid-column-start和grid-column-end组合使用
• 格式：grid-column:start / end；可以一次接受两个值，用/分开。
• 只有一个值时，效果跟grid-column-start一样。
• 也可以加span，但是值的含义变了，跨越宽度/结束位置-1。

示例：

/*从第四列开始，到第五列结束。*/
#water {
	grid-column:4/6;
}

效果：

grid-row-start:

• grid-row-start就像grid-column-start一样，只不过是在垂直方向指定起始位置。

grid-row:

• 控制列
• 通常同时使用grid-column和grid-row来设置网格项在行和列中的位置。

grid-area:

• 包括grid-row-start, grid-column-start, grid-row-end, grid-column-end，由/分开。
• 若存在多个网格项，可以任意覆盖。

格式：

grid-area:grid-row-start/grid-column-start/grid-row-end/grid-column-end

示例：

#water {
	grid-area: 1/2/4/6;
}

效果：

grid-template-columns:和grid-template-rows:

• 设置列宽和行宽
• 可以用px 、em、%表示

示例：

/*分别将列的宽度设置为100px、3em和40%。*/
#garden {
  	display: grid;
	grid-template-columns:100px 3em 40%;
  	grid-template-rows: 20% 20% 20% 20% 20%;
}

效果：

• repeat（value, width）函数，
  • value:列|行数
  • width:列|行宽

示例：

/*创建8列，每列占12.5%的宽度*/
#garden {
	display: grid;
	grid-template-columns:repeat(8,12.5%);
    /*等同于：grid-template-columns:12.5% 12.5% 12.5% ...12.5%;*/
  	grid-template-rows: 20% 20% 20% 20% 20%;
}

效果：

• 网格系统也引入了一个新的单位，分数fr。
  • 格式：分子fr
  • 当列的宽度采用像素，百分比或者em的单位的时候，其他使用fr单位设置的列将会平分剩下的空间。

示例：

/*杂草占据了你第一行的左1/6，胡萝卜占据着剩下的5/6。*/
#garden {
  	display: grid;
	grid-template-columns:1fr 5fr;
  	grid-template-rows: 20% 20% 20% 20% 20%;
}

效果：

grid-template

• 是grid-template-rows和grid-template-columns的缩写形式
• 格式：grid-template: grid-template-columns /grid-template-rows

示例：

/*上部的60%，以及左侧的200像素。*/
#garden {
  	display: grid;
	grid-template: 60% 60%/200px;
}

效果：

Order属性

• 使用order属性来重写它的顺序，这也是网格布局优于表格布局的好处之一。
• 默认所有的网格项的order都是0，但是顺序也可以被任意设置为正数或者负数，就像z-index一样。