前端笔记：Grid布局

最新推荐文章于 2024-08-16 17:14:08 发布

Naisu Xu

最新推荐文章于 2024-08-16 17:14:08 发布

阅读量1.3w

点赞数 17

分类专栏： Web与JS相关文章标签： css 前端布局 ui 设计

本文链接：https://blog.csdn.net/Naisu_kun/article/details/114371507

版权

Web与JS相关专栏收录该内容

58 篇文章 21 订阅

订阅专栏

目的

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，如果只写一个参数则表示两个属性相同。下面是一些常用可选的参数：