CSS那些厉害的布局方法

1.超级居中(水平和垂直都居中)

只需要给外层父级元素加上下面代码

复制代码
.parent{
   display: grid;
   place-items: center;
}

2.经典的sidebar布局

复制代码
.parent{
    display: grid;
    grid-template-columns: minmax(150px,25%) 1fr;
}

3.固定的header和footer,中间的内容自适应

复制代码
.parent{
    display: grid;
    grid-template-rows:auto 1fr auto;
}

一些brankproint

相关推荐
蜡台几秒前
H5使用Chrome 权限问题
前端·javascript·chrome
掘金一周8 分钟前
你们觉得房贷多少,没有压力 | 沸点周刊 4.30
前端·人工智能·后端
小小码农Come on10 分钟前
QML访问子项内容
前端·javascript·html
han_28 分钟前
一篇看懂国内外主流大模型:GPT、Claude、Gemini、DeepSeek、通义千问有什么区别?
前端·人工智能·llm
一行代码一行诗++37 分钟前
注释是什么和注释该怎么写(C语言)
java·前端·javascript
涂兵兵_青石疏影44 分钟前
beginPath-vs-save详解
前端
泽_浪里白条1 小时前
我在 Superset 6.x 做自定义图表 + Embedded SDK 集成的实战复盘(附踩坑清单)
前端·数据可视化
幽络源小助理1 小时前
小六壬排盘工具源码 自适应双端 纯原生HTML+JS
前端·javascript·html
Championship.23.242 小时前
Open Source Pipeline Skill深度解析:自动化开源贡献全流程
前端·javascript·html
Bigger2 小时前
🧠 前端岗位的"结构性调整":现象背后的冷思考
前端·程序员·ai编程