首页 前端知识 【工作记录】css3 grid布局笔记

【工作记录】css3 grid布局笔记

2024-03-29 15:03:37 前端知识 前端哥 262 357 我要收藏

概述

Grid 布局即网格布局,是一种新的 CSS 布局模型,比较擅长将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案,是目前唯一一种 CSS 二维布局

参数配置说明

属性说明可配置选项说明
grid-template-rows/grid-template-columns定义行高/列宽px: 固定值
%:百分比
fr: 片段,分配剩余空间
auto: 先于fr计算,获取必要的最小空间
repeat: 简化重复值
grid-auto-flow定义项目的排列顺序
控制排列方向
row: 先填入第一行
column: 先填入第一列
row dense: 按行填充空白
column dense:按列填充空白
grid-auto-rows/grid-auto-columns定义多余网格的行高/列宽
row-gap/column-gap行间距/列间距
gap同时设置行间距和列间距
grid-template-areas定义区域布局位置通过grid-area设置某个块处于哪个位置
justify-items/align-items设置内部布局相对于容器的水平/垂直位置stretch: 默认值,拉伸
start: 开始位置
center: 居中位置
end: 结束位置
place-itemsalign-items和justify-items的简写同时设置水平和垂直位置配置 参数同上
justify-content/align-content设置容器相对于外部区域的水平/垂直位置start: 从行首开始
end:从行尾开始
center: 居中
stretch: 拉伸 占满
space-around: 剩余空间平均分配
space-between: 平均分配行、列间距
space-evenly: 所有间距平均分配
place-contentalign-content和justify-content的简写配置参数同上
grid-row-start/grid-row-end/grid-column-start/grid-column-end每个单元格的位置配置,配置标识从第几根网格线开始到第几根网格线结束,也可以使用span 标识间隔几根网格线number: 从第几根网格线开始,到第几根网格线结束
name: 需要先定义网格线
span number: 标识跨域几根网格线
grid-column/grid-row上面配置的缩写形式1/3 标识从1开始到3结束
grid-area缩写形式1/1/3/3 标识行和列都是从1开始到3结束
align-self/justify-self单元格内容相对于单元格的水平和垂直位置stretch: 默认值 拉伸
start: 开始位置
center: 居中位置
end: 结束位置
place-self上面配置的缩写形式配置值同上
转载请注明出处或者链接地址:https://www.qianduange.cn//article/4243.html
标签
笔记
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!