目的

CSS中的Grid布局是最新加入的布局方式，有点像Android里的GridLayout（网格布局）或者WPF里的Grid布局。相比传统的布局方式Grid布局也非常好用。这里对相关的内容做个基本的记录。

基础说明

在代码中我们只要把某个元素的 display 属性设置为 grid或者 inline-grid，那么这个元素就会成为Grid父 容器 ，它下面直接的子元素将成为Grid子 元素 。网格布局从名字上应该就能理解大致的样子，由行和列组成的表格，就和Excel差不多。网格布局中由一条条水平和竖直的的 网格线 围成一个个格子被称为 单元格 。

容器的属性

网格设置

grid-template-columns 和 grid-template-rows

grid-template-columns 用于定义每一列的宽度； grid-template-rows 用于定义每一行的高度。这两个属性可填的值挺多，常见的值如下：

• px、rem等长度；
• 百分比；
• 以 fr 为单位的数据（作为分配可用空间的比例系数）；
• repeat() 函数，该函数用于创建重复片段;
  比如 grid-template-rows: repeat(3, 100px) 相当于 grid-template-rows: 100px 100px 100px
  该函数接收两个参数，第一个参数为重复次数，第二个参数为数据片段
  第一个参数也可以选择 auto-fill ，这样浏览器会在容器大小可能的范围内重复片段；
• minmax(min, max) 函数， 限定长度在这两个范围内；
• auto 表示由浏览器自行决定大小；

除了定义行或列的宽高外这两个属性还可以同时对 网格线 进行命名，用 [] 包围的文字就是网络线名称（见上一章节图片）。

grid-auto-columns 和 grid-auto-rows

当所创建的网格无法容纳所有元素时，浏览器会自动创建额外网格来容纳这些元素， grid-auto-columns 和 grid-auto-rows 分别用于设置这些自动创建的网格的列和行的长度。

grid-column-gap 、 grid-row-gap 和 grid-gap

grid-column-gap 用于设置网格列间距； grid-row-gap 用于设置网格行间距； grid-gap 是前两者的复合属性，第一个参数为行间距、第二个参数为列间距，也可以只用一个参数同时设置行和列。

元素排布

grid-auto-flow

grid-auto-flow 用于指定元素在网格中自动排列的规则，可用参数如下：

• row 默认值，先行后列，在必要时增加新行；
• column 先列后行，在必要时增加新列；

grid-template-areas

grid-template-areas 用于给网格的各个区域命名，元素可以使用 grid-area 属性摆放到指定名称的网格中。 grid-template-areas 属性使用字符串作为参数，一行字符串代表一行网格，不需要的用到的区域用 .表示。下面是一些简单的写法示例：

grid-template-areas: "a b c""d e f""g h i";grid-template-areas: "a . c""d . f""g . i";grid-template-areas: "a a a""b c c""b c c";grid-template-areas: "head head""nav  main""nav  foot";

grid-template-areas 需要配合 grid-area 使用，具体的演示见下文 grid-area 。

对齐方式

justify-items 、 align-items 和 place-items

justify-items 属性设置单元格内容的水平位置， align-items 属性设置单元格内容的垂直位置。 place-items 是两者的复合属性，接收两个参数，第一个是align-items，第二个是justify-items，如果只写一个参数则表示两个属性相同。下面是一些常用可选的参数：

• start 紧靠单元格起始位置（左或上）；
• end 紧靠单元格结束位置（右或下）；
• center 居中；
• stretch 拉伸，默认值，占满整个单元格；

justify-content 、 align-content 和 place-content

justify-content 属性控制整个内容区域在容器里面的水平位置， align-content 属性控制整个内容区域的垂直位置。 place-content 是两者的复合属性，接收两个参数，第一个是align-content，第二个是justify-content，如果只写一个参数则表示两个属性相同。下面是一些常用可选的参数：

• start 紧靠起始位置（左或上）；
• end 紧靠结束位置（右或下）；
• center 居中；
• stretch 项目大小没有指定时，拉伸占据整个网格容器；
• space-around 行或列平均分布，首尾行或列与两端的距离等于行或列间距的一半；
• space-between 行或列平均分布，首尾行或列与两端没有间距；
• space-evenly 行或列平均分布，首尾行或列与两端的距离等于行或列间距；

元素的属性

元素排布

grid-column-start / grid-column-end 和 grid-column

这几个属性用于将元素摆放到两条垂直网格线之间。

grid-row-start / grid-row-end 和 grid-row

这几个属性用于将元素摆放到两条水平网格线之间。

grid-area

grid-area 用于将元素放置在某个名称的网格中，需要和 grid-template-areas 结合使用。

对齐方式

justify-self 、 align-self 和 place-self

这几个属性和上面 justify-items 、 align-items 、 place-items 这几个数据功能差不多，两者可选参数也是一样的，只不过上面的是作用于全局的，而 justify-self 、 align-self 、 place-self 是作用于单体的。

总结

Grid布局的内容基本就是这些了，更多内容可以参考下面链接：
《CSS 网格布局》 - MDN
《CSS Grid 网格布局教程》 - 阮一峰的网络日志

前端笔记：Grid布局相关推荐

1. 从零开始学前端：grid布局和音频 --- 今天你学习了吗？（CSS：Day24）

   从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:OPPO商城轮播图 - 今天你学习了吗?(CSS:Day23) 文章目录 从零开始学前端:程序猿小白也可以 ...

2. 前端笔记-CSS布局使得网页分成3部（头，内容，脚）

   css代码如下: <style>* {margin: 0;padding: 0;}.top {width: 100%;height: 40px;background-color: #2fa ...

3. Web前端笔记（10）Grid布局

   Grid网格布局: Grid布局是一个二维布局方法,横纵两个方向总是同时存在.与flex布局的语法类似,Grid布局涉及到的语法也分为两类,一类是作用在Grid容器上的,另一类是作用在grid子项上的 ...

4. 前端每日实战：143# 视频演示如何用 CSS 的 Grid 布局创作一枚小松鼠邮票

   效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YOoXpv 可交互视频 此视频是可 ...

5. 前端每日实战：142# 视频演示如何用 CSS 的 Grid 布局创作一枚小鸡邮票

   效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mGZbmQ 可交互视频 此视频是可 ...

6. Henry前端笔记之响应式布局与弹性布局

   Henry前端笔记之响应式布局与弹性布局 弹性布局 Rem布局的原理解析(em 与 rem区别 ): rem如何实现自适应布局 使用CSS3 REM 和 VW 打造等比例响应式页面的便捷工作流 从网易 ...

7. display属性_前端基础：Grid 布局教程，重新复习grid布局的容器和项目属性

   链接:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html 一.概述 它将网页划分成一个个网格,可以任意组合不同的网格,做出 ...

8. 学习笔记(48):Python实战编程-grid布局

   立即学习:https://edu.csdn.net/course/play/19711/343110?utm_source=blogtoedu grid布局:根据表结构进行的布局,索引为0行0列开始, ...

9. 前端基础知识（grid布局）

   参考链接 grid布局简介 CSS Grid(网格)布局,是一个二维的基于网络的布局系统.Flexbox 的出现很大程度上改善了我们的布局方式,但它的目的是为了解决更简单的一维布局,而不是复杂的二维布 ...

最新文章

1. 关于Discuz X2 论坛备份详解（论坛搬家）
2. 如何才能轻而易举的写出递归函数
3. 【数据挖掘】视频版权检测优胜解决方案
4. kirin710f是什么处理器_如何看待麒麟710F处理器？
5. 如何用法向量求点到平面距离_支持向量机（SVM）
6. 从零开始学PowerShell(10)PowerShell中的子表达式
7. 通过自己的项目实际经验，阐述为什么“恶心玩技术”？玩Java开源B/S的教训（三）...
8. [C#]结构体和字节数组的相互转化
9. 求出0～999之间的所有“水仙花数”并输出。“水仙花数”是指一个三位数，其各位数字的立方和确好等于该数本身
10. B站飞机大战源码、素材
11. 皮肤测试小软件有哪些,【皮肤测试小程序】皮肤测试小程序有什么功能呢？
12. 完美国际真数苹果_让苹果数据线下岗的两款数据线！剪断了还能用！
13. linux查看指定目录下各个文件大小以及总体大小
14. iPhone 换电池 检测新电池实际容量
15. 软件：推荐八款电脑实用软件，你都用过吗？
16. linux 下安装迅雷软件
17. lwm2m和coap协议 简解读
18. 【单片机】C52单片机之4X4矩阵键盘和数码管联动
19. STM32Cube的串口实战（一）GPS+BD模块
20. ADIS16203角度传感器的stm32驱动实现要点

热门文章

1. hdu4121 象棋checkmate模拟
2. H3C WLAN基本配置
3. CSDN发表文章数量限制的缺陷
4. 顺序表--学生信息管理
5. 音频格式转换（ffmpeg）
6. YTU 问题 : 排序
7. jpa整合querydsl实现简单查询以及左联查询
8. #includealgorithm
9. 目标检测评价指标：精确度mAP
10. 全国计算机设计大赛贴吧,2019继续教育学院精彩时刻——大赛篇