整理Grid的布局属性

display: grid; 相关内容

---

区别于 flex; column 和 row 两个方向进行设置; flex 只可以设置 column 单个方向

<!-- 均以此为示例 -->
<style type="text/css">
.wrapper {
	background: #333;
	display: grid;
}
.wrapper > div {
	padding: 1em;
}
</style>
<div class="wrapper">
  <div class="inner1">inner1</div>
  <div class="inner2">inner2</div>
  <div class="inner3">inner3</div>
  <div class="inner4">inner4</div>
  <div class="inner5">inner5</div>
  <div class="inner6">inner6</div>
</div>

外层容器-相关属性

父元素(wrapper)

grid-auto-flow

• 布局方向(默认值row)
• 参数: row/column(row dense/column dense)

grid-template-columns/grid-template-rows 和 grid-auto-columns/grid-auto-rows

• grid-template-columns

  • 可以定义单个和多个值;
  • 定义列数和列宽;

• grid-template-rows

  • 可以定义单个和多个值;
  • 对应的行号符合对应的参数位的设置;
  • 如果内容总行数超过定义的个数, 那就自动为 auto;

• grid-auto-columns

  • 只有一个参数
  • 只需要设置列宽, 自动计算列的列数

• grid-auto-rows

  • 只有一个参数
  • 只需要设置行高, 自动计算列的行数;

示例:

1. template 使用

.wrapper {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: minmax(100px, 200px); /* 只定义一个值,那么第一行符合这个规则,其他行则为auto */
}

2. 混合-情况1[常用]

.wrapper {
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: minmax(100px, 200px); /* 每一行都符合这个规则 */
}

3. 混合-情况2
   • 未定义 flow 情况下: 相当于定义每列宽度和对应行号符合对应规则;
   • 定义 grid-auto-flow: column; 后: 按行进行填充, 行数填满后填列;

.wrapper {
	grid-auto-columns: 200px;
	/* 定义了两行 */
	/* grid-auto-flow: row 时: 前两行均为200px, 后边的行为auto */
	/* grid-auto-flow: column 时: 内容只存在两行, 然后列填充 */
	grid-template-rows: minmax(100px, 200px) 200px;
}

4. auto 使用
   • 未定义 flow 情况下: 相当于只是定义了子标签的一个宽高; (图1)
   • 定义 grid-auto-flow: column; 后: 只是更改布局, 所有子标签均在一行显示; (图2)

.wrapper {
	/* grid-auto-flow: column; */
	grid-auto-columns: 200px; /* 每一列都符合这个规则 */
	grid-auto-rows: minmax(100px, 200px); /* 每一行都符合这个规则 */
}

• 图1
  
• 图2
  

gap 间距

grid-gap & grid-row-gap & grid-column-gap

items 相关

align-items & justify-items & place-items

1. 说明: 修改单个项目(相当于 inner1 或 其他 子标签)的定位;
2. 参数:
   • stretch: 默认值; 铺满
   • start: 上/前
   • center: 中
   • end: 下/后
3. 举例:

.wrappper {
	align-items: center;
	justify-items: center;

	/* 等同于 */
	place-items: center;
}

content 相关

align-content & justify-content & place-content

1. 说明: 修改整个内容(整个 wrapper 内容)的定位;

2. 参数

   • stretch: 默认值; 铺满
   • start: 上/前
   • center: 中
   • end: 下/后
   • space-around: 每个元素周围分配相同的空间(间隔等于相邻两个元素的空间的和)
   • space-between: 首元素放在起点;

   末元素放在结尾

   • space-evenly: 每个元素之间的间隔相等

3. 示例:

.wrapper {
	align-content: center;
	justify-content: center;

	/* 等同于 */
	place-conent: center;
}

内层元素-相关属性

子元素(inner)

起始-占位

grid-row[grid-row-start/grid-row-end] & grid-column[grid-column-start/grid-column-end]

示例:

.inner1 {
	grid-row: 2 / 4; /* 表示从高度是第2横线到第4横线;其他内容自动排版 */
}

self

align-self + justify-self = place-self

.inner2 {
	align-self: center;
	justify-self: center;

	/* 等同于 */
	place-self: center;
}