引言
在上篇文章中,对 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
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