grid 网格中的内容上下居中_前端 CSS Grid 网格布局指南「下」

引言

在上篇文章中，对 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-content: center;    /*    * 内部文字居中的作用    * 不是本篇文章的 grid    * 注意区分    */  border: 1px solid #ddd;  font-size: 2em;}.item-1 {  background-color: #BFEFFF;}.item-2 {  background-color: #BFEFFF;}.item-3 {  background-color: #BFEFFF;}.item-4 {  background-color: #BFEFFF;}.item-5 {  background-color: #BFEFFF;}.item-6 {  background-color: #BFEFFF;}

网格为 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-templat