grid布局

注意：个人学习记录只记录了常用的属性，具体使用及介绍建议观看阮一峰大神文章，还有一篇总结的很不错的文章地址

容器属性

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

单元格

行和列的交叉区域，称为"单元格"

正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

grid-template-columns 属性， grid-template-rows 属性

属性值

1. 固定单位 px

2. 百分比 %

3. 可以设置重复值 repeat()

4. auto-fill 自动填充

5. fr 比例 (可以和绝对单位结合使用)

6. minmax() 它接受两个参数，分别为最小值和最大值。

7. auto关键字表示由浏览器自己决定长度

8. [xxx] 方括号，指定每一根网格线的名字

grid-row-gap 属性， grid-column-gap 属性， grid-gap 属性

grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）

grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

grid-auto-flow

grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。

grid-auto-flow: column;

justify-items 属性， align-items 属性， place-items 属性

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

设置列

• grid-template-columns

1. grid-template-columns:repeat(auto-fill,100px) // 自适应每个盒子100px

2. grid-template-columns:repeat(4,1fr) // 第一个参数 表示四列，每个盒子自适应

3. grid-template-columns: 1fr 2fr 3fr // 也可以是px 第一行宽度被按照值分配

4. grid-template-columns：1fr minmax(200px) // 开始都是自适应 当第二个参数小于200px 就不会在缩小了

5. grid-template-columns:[c1] 100px [c2] 100px [c3] 100 // 添加网格线

• grid-template-rows // 设置行

• grid-row-gap // 设置行间距间距

• grid-column-gap // 设置行间距间距

• grid // 当行和列一样时

• grid-gap(grid-row-gap和grid-column-gap的简写)

• grid-template-areas // 设置区域，如grid-template-areas: 'a a a' 'b b b'; 不需要设置区域的使用 . 代替

• grid-auto-flow // 设置排序方向，默认是row 横向排序，可以设置为column 纵向排序，还有第二个属性 dense 当一行中，一个元素自一行放不下时，默认会被挤到下一行，设置了dense ，下面有合适宽度的盒子，会自动填充上来

• justify-items // 设置项目水平对齐方式，参数有 start | end | center | stretch，设置对齐方式（左中右）

• align-items // 设置项目垂直方向，参数有 start | end | center | stretch，设置对齐方式（左中右）

• place-items(justify-items和align-items的简写)

justify-content设置整个内容对齐方式（他们都有的对齐方式）

start | end | center | stretch | space-around | space-between | space-evenly

• justify-content

• align-content

• place-content(justify-content 和align-content的简写)

1. grid-auto-columns(待了解)

2. grid-auto-rows(待了解)

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这六个属性的合并简写形式。

项目属性

grid-column-start 属性， grid-column-end 属性， grid-row-start 属性， grid-row-end 属性

项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。

• grid-column-start属性：左边框所在的垂直网格线

• grid-column-end属性：右边框所在的垂直网格线

• grid-row-start属性：上边框所在的水平网格线

• grid-row-end属性：下边框所在的水平网格线

column 代表列 row 代表行

他们都有一个span 属性 代表跨越几个：例子grid-column-start: span 3; 跨越3个

1. grid-column: 1 / 3; // 设置当前项从第几个网格线开始 和结束

2. grid-column-start // 从第几个网格线开始 grid-column-start：number

3. grid-column-end // 从第几个网格线结束grid-column-slart：number

4. grid-column(grid-column-slart和grid-column-end的简写，1是示例)

5. grid-row-start // 从第几个网格线开始 grid-row-start：number

6. grid-row-end // 从第几个网格线结束grid-row-start：number

7. frid-row(grid-row-start和grid-row-end的简写) 和第一个一样的

8. grid-area // 设置当前项目在那个区域显示，容器使用grid-template-areas 设置区域

9. justify-self // 设置单个项的 水平方向对齐方式 参数有 start | end | center | stretch

10. align-self // 设置单个项的 垂直方向对齐方式 参数有 start | end | center | stretch

11. place-seif(justify-self和align-self的简写)

<template>
	<div class="grid-con">
		<div class="item-1">1</div>
		<div>2</div>
		<div>3</div>
		<div class="item-4">4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div>9</div>
	</div>
</template>

<style scoped lang="scss">
$fclolor: red;
.grid-con {
	margin: 0 auto;
	width: 600px;
	height: 600px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	div {
		width: 100%;
		height: 100%;
		border: 1px solid red;
		font-size: 50px;
		text-align: center;
	}
	.item-4 {
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
		grid-column: 1 / 3;
		grid-row: 2 / 4;
	}
}
</style>