前端笔记:Grid布局

目的

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-columnsgrid-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 网格布局教程》 - 阮一峰的网络日志

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Naisu Xu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值