grid⽹格中的内容上下居中_前端CSSGrid⽹格布局指南「下」引⾔
在上篇⽂章中，对 CSS Grid 布局做了⼀个简短的介绍，不难看出它⾮常强⼤，但要使⽤好它，还需要学习更多的知识，本⽂章将介绍
CSS Grid 的各种属性。
本⽂有些枯燥，我⾃⼰都没有耐性⼀⼝⽓读完它，但要想将 Grid 运⽤得⼼应⼿，还要不断的记忆和练习，本⽂以总结属性形式呈现，可以
把它当做⼀份⽂档收藏，以便需要时查阅。
如果您还没有了解 CSS Grid ，请先阅读《前端 CSS Grid ⽹格布局指南【上】》，对它⼤概有个简单的印象。
为了⽅便练习，新建⼀个 style-02.css ，您也可以多建⽴⼀些 CSS ⽂件⽤作练习，将 CSS ⽂件 link 到 HTML ⽂件中：
1
2
3
4
5
6
在 CSS 代码中，将每个项的颜⾊设置成⼀样，并删除上⼀篇⽂章中的 CSS 模板代码：
.container {  display: grid;  grid-template-columns: 1fr 1fr 1fr;  grid-template-rows: 1fr 1fr;  gap: 5px 5px;}.item {  display: flex;  align-items: center;  justify-co ⽹格为 3 列 ，2 ⾏，效果像这样：
容器属性
display
grid-template-columns
grid-template-rows
display: grid | inline-gridgrid-template-columns:  |
1、display ⽣成⽹格布局。
⽣成⽹格布局，其中 inline-grid 使容器变成⾏内元素：
display: grid | inline-grid
display: grid
display: inline-grid
2、grid-template-columns 和 grid-template-rows ⽣成列和⾏。
以 grid-template-columns 为例，两种写法：
grid-template-columns:  ...;grid-template-columns:  ...;
可以是 auto ， px ，% ，em ，rem ，fr 。
可以⾃定义⽹格线的名字，列有 M + 1 条⽹格线，⾏有 N + 1 条⽹格线，⽹格线名字⽤ '[]' 括起来并⽤空格与值隔开：
grid-template-columns:  [col1-start] 50px [col2-start] 50px [col3-start] 50px [col3-end];
⼀条⽹格线也可以多命名，⽤空格分隔：
grid-template-columns:  [c1开始] 1fr [c1结束 c2开始] 1fr [c3] 1fr [c3-end];
⽹格线可以给项所在区域进⾏描述，让我们更快的定位到项：
3、fr 单位，⽹格空间⽐例单位。
相当于 “份” ，表⽰ “项” 占容器的 “⼏份” 。
如果给项的列宽和⾏⾼设置了固定的尺⼨，项不会根据容器的宽⾼缩放或拉伸。设置成 fr 时，当容器没有具体宽度的时候，项的列宽会按照浏览器的宽度计算⾃适应。
grid-template-columns: 1fr 1fr 1fr;
下图表⽰每项宽占浏览器宽度的 1/3：
如果其中⼀项的值是 auto ，除 auto 项外，每项宽为 “1/容器 (浏览器) - auto 值” 。
grid-template-columns: 200px 1fr 1fr;
2 ，
3 两列分别占 “1/容器 (浏览器) - 200px” ：
auto 项的列宽为实际项中内容的宽度，在同⼀列中以列宽最⼤的项为主：
4、repeat() 函数，简化重复输⼊。
可以利⽤ repeat() 避免⼿动输⼊重复输⼊项：
grid-template-columns: repeat(12, 1fr);
直接⽣成了 12 列，列宽分别为 1fr 。
repeat() 函数还可以重复模式：
grid-template-columns: repeat(3, 20px 50px 20px);
代码重复⽣成了 “2 个 3 列” 每⼀个 3 列的列宽分别是 20px 50px 20px ：
5、auto-fill 关键字。
项固定⼤⼩时，希望⼀⾏能尽可能多的显⽰，⽤ repeat() 函数配合 auto-fill 关键字，可以让⼀⾏容纳更多项：grid-template-columns: repeat(auto-fill, 100px);
前端页面模板每项宽度 100px ，随着浏览器拉伸，尽量容纳更多的列：
6、minmax() 函数产⽣⼀个长度范围，两个参数分别表⽰最⼤值和最⼩值。
grid-template-columns: minmax(100px, 300px) minmax(100px, 300px) minmax(100px, 300px);/*或*/grid-template-columns: repeat(3, minmax(100px, 300px))；随着浏览器的拉伸和缩放，每项最⼩列宽 100px ，最⼤列宽 300px ：
column-gap
row-gap
gap
grid-row-gap 废弃
grid-column-gap 废弃
grid-gap 废弃
column-gap: row-gap: gap:
1、column-gap 设置⾏间距，row-gap 设置列间距。
row-gap: 5px;column-gap: 5px;
2、gap 为⼆者综合简写。
第 1 个参数为⾏间距，第 2 个参数为列间距，如果省略了第 2 个参数，列宽和⾏⾼都是第 1 个参数的值：
row-gap: 5px;column-gap: 5px;/* 等于下⾯的写法 */gap: 5px 5px;/* 或 */gap: 5px;
3、grid-row-gap 和 grid-column-gap 与 row-gap 、grid-column-gap 的作⽤⼀样，⽬前已经废弃，grid-gap 和 gap 作⽤⼀样，⽬前
也已经被废弃。
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid-auto-columns: grid-auto-rows:  grid-auto-flow: row | column | row dense | column dense
1、当现有项不在规划好的有限⽹格区域时，使⽤ grid-auto-columns 和 grid-auto-rows 规划⾃动创建的隐式追踪项，并设置它们的尺
⼨。
有⼀个规定好的 1 ⾏ 2 列的 Grid ：
.container {  display: grid;  grid-template-columns: 50px 50px;  grid-template-rows: 50px;  gap: 5px 5px;}
显⽰应该这样：
Grid 只容纳 2 列 ，此时第 2 项移动到不存在的第 4 列：
我们从未定义 3 、4 两列。因为我们引⽤的列不存在，所以创建了宽度为 0 的隐式项 3 来填补空⽩。
这时候 就可以利⽤ grid-auto-columns 和 grid-auto-rows 设置这些隐式的项，让它和我们现有项尺⼨⼀致：
.container {  display: grid;  grid-template-columns: 50px 50px;  grid-template-rows: 50px;  grid-auto-columns: 50px;  grid-auto-rows: 50px;  gap: 5px 5px;}
现在隐式的项已经增加了同样的列宽和⾏⾼：
2、Grid 渲染默认先填满第 1 ⾏，再填开始填满第 2 ⾏，以此类推，可以利⽤ grid-auto-flow 改变。
.container {  display: grid;  grid-template-columns: repeat(3, 100px);  grid-template-rows: 1fr 1fr;  grid-auto-flow: row;  gap: 5px 5px;}
这是⼀个 2 ⾏ 3 列的 Grid ，分别渲染 1 ， 2 ， 3 ， 4 ，5 ，6 ：
可以改变渲染⽅式为 grid-auto-flow: column ：
.container {  display: grid;  grid-template-columns: repeat(3, 100px);  grid-auto-flow: column;  grid-template-rows: 1fr 1fr;  gap: 5px 5px;}
让它先填满第 1 列，再填满第 2 列：
3、利⽤ dense ⾃动设置其余项。
某些项已经指定了位置，其余项可以利⽤ dense ⾃动设置放置⽅式：
.container {  display: grid;  grid-template-columns: repeat(3, 100px);  grid-template-rows: 1fr 1fr;  gap: 5px 5px;}.item-1 {  grid-column-start: 1;  grid-column
1 、
2 项的 grid-column-start 代表项左侧的⽹格线，grid-column-end 代表项右侧的⽹格线，⽰例中，它们的区域就是 1 -
3 ⽹格线之间：
只有 1 ，2 项被指定位置了，其余的项默认摆放了，1 项的后⾯为空了，如果想改变剩余项的摆放，可以利⽤ dense 来设置。
.container {  display: grid;  grid-template-columns: repeat(3, 100px);  grid-template-rows: 1fr 1fr;  grid-auto-flow: row dense;  gap: 5px 5px;}
先填满第 1 ⾏，再填满第 2 ⾏，所以 1 项后⾯被填成 3 项了，8 ，9 项⾃动向前尽量填满⾏：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。