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

概述

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-items align-items和justify-items的简写 同时设置水平和垂直位置配置 参数同上
justify-content/align-content 设置容器相对于外部区域的水平/垂直位置 start: 从行首开始 end:从行尾开始 center: 居中 stretch: 拉伸 占满 space-around: 剩余空间平均分配 space-between: 平均分配行、列间距 space-evenly: 所有间距平均分配
place-content align-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 上面配置的缩写形式 配置值同上
相关推荐
李元豪3 分钟前
【行云流水ai笔记】粗粒度控制:推荐CTRL、GeDi 细粒度/多属性控制:推荐TOLE、GPT-4RL
人工智能·笔记
小样还想跑13 分钟前
axios无感刷新token
前端·javascript·vue.js
Java水解22 分钟前
一文了解Blob文件格式,前端必备技能之一
前端
用户38022585982443 分钟前
vue3源码解析:响应式机制
前端·vue.js
bo521001 小时前
浏览器渲染机制详解(包含渲染流程、树结构、异步js)
前端·面试·浏览器
普通程序员1 小时前
Gemini CLI 新手安装与使用指南
前端·人工智能·后端
山有木兮木有枝_1 小时前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js
流口水的兔子1 小时前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
多啦C梦a1 小时前
🪄 用 React 玩转「图片识词 + 语音 TTS」:月影大佬的 AI 英语私教是怎么炼成的?
前端·react.js
呆呆的心1 小时前
大厂面试官都在问的 WEUI Uploader,源码里藏了多少干货?🤔
前端·微信·面试