Turing

Appearance

Grid 网格布局 ​

display(容器属性) ​

  • grid: 默认情况，容器内都是块级元素
  • inline-grid: 行内元素

WARNING

设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

grid-template-columns、grid-template-rows(容器属性) ​

grid-template-columns： 每列的列宽
grid-template-rows：每行的行高

  • 100px 100px 100px: 三行或者三列，每个元素宽或者高都是 100px

  • repeat(3, 100px): 和上面三个 100px 的一样

  • repeat(3, 33.3%): 百分比写法

  • repeat(2, 100px 20px 80px): 相当于(100px 20px 80px 100px 20px 80px)

  • repeat(auto-fill, 100px): 会自动填充

  • repeat(auto-fit, 100px): 会自动填充,跟auto-fill的区别就是单元格宽度不固定时，auto-fill会用空格子填满剩余宽度，auto-fit则会尽量扩大单元格的宽度

  • 150px 1fr 1fr: 第一个是 150px，后面两个平分剩下的空间

  • repeat(auto-fill, minmax(100px, 1fr)): minmax()会产生长度范围，最小值和最大值

  • 100px auto 100px: auto会直接使用剩下的空间

  • [c1] 100px [c2] 100px [c3] auto [c4]: 定义网格线的名字，3*3 有 4 个网格线，用于使用时引用

布局实例 ​

两栏式布局只需要一行代码：

css
.wrapper {
	display: grid;
	grid-template-columns: 70% 30%;
}

传统的十二网格布局：

css
.wrapper {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
}

row-gap、column-gap、gap(容器属性) ​

row-gap: 行与行的间隔（行间距）
column-gap: 列与列的间隔（列间距）
gap: column-gap 和 row-gap 的合并简写形式

grid-template-areas(容器属性) ​

这个属性很强大!!

点击查看代码，可以实现包含 header、menu、main、footer 的网页模板
html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.item1 {
				grid-area: header;
			}
			.item2 {
				grid-area: menu;
			}
			.item3 {
				grid-area: main;
			}
			.item4 {
				grid-area: right;
			}
			.item5 {
				grid-area: footer;
			}

			.grid-container {
				display: grid;
				grid-template-areas:
					"header header header header header header"
					"menu main main main right right"
					"menu footer footer footer footer footer";
				grid-gap: 10px;
				background-color: #2196f3;
				padding: 10px;
			}

			.grid-container > div {
				background-color: rgba(255, 255, 255, 0.8);
				text-align: center;
				padding: 20px 0;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div class="grid-container">
			<div class="item1">Header</div>
			<div class="item2">Menu</div>
			<div class="item3">Main</div>
			<div class="item4">Right</div>
			<div class="item5">Footer</div>
		</div>
	</body>
</html>

区域的命名会影响到网格线，每个区域的起始线会自动命名区域名-start, 终止网格线自动命名为区域名-end。

grid-auto-flow(容器属性) ​

容器的子元素会按照顺序，自动放置在每一个网格

  • row：这是默认值，“先行后列”
  • column: “先列后行”
  • row dense: "先行后列"，并且尽可能紧密填满，尽量不出现空格。
  • column dense: "先列后行"，并且尽可能紧密填满，尽量不出现空格。

justify-items、align-items、place-items(容器属性) ​

justify-items: 单元格内容的水平位置
align-items: 单元格内容的垂直位置
place-items: justify-items和align-items的复合属性

  • start：对齐单元格的起始边缘。
  • end: 对齐单元格的结束边缘。
  • center: 单元格内部居中。
  • stretch: 拉伸，占满单元格的整个宽度（默认值）。

justify-content、align-content、place-content(容器属性) ​

justify-content: 整个内容区域在容器里面的水平位置
align-content: 整个内容区域的垂直位置 place-content: justify-content和align-content的复合属性

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

grid-column-start、grid-column-end、grid-row-start、grid-row-end、grid-column、grid-row(项目属性) ​

指定项目的位置，定位在哪根网格线
默认位置：上边框是第一根水平网格线，下边框是第二根水平网格线

grid-column-start: 左边框所在的垂直网格线
grid-column-end: 右边框所在的垂直网格线
grid-row-start: 上边框所在的水平网格线
grid-row-end: 下边框所在的水平网格线
grid-column: grid-column-start和grid-column-end的复合属性 grid-row: grid-row-start和grid-row-end的复合属性

由浏览器自动布局，这时它们的位置由容器的grid-auto-flow属性决定

  • 数字: 网格线的号
  • header-start: 网格线的名，这是grid-template-areas
  • span 2: 跨越2格，等同于数字3

grid-area(项目属性) ​

指定项目放在哪一个区域

  • 区域名：容器属性grid-template-areas定义好的名字
  • 1/1/3/3：grid-row-start、grid-column-start、grid-row-end、grid-column-end合并简写形式

justify-self、align-self、place-self(项目属性) ​

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

属性值和justify-items、align-items、place-items相同。