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

相关推荐
小小小小宇3 分钟前
前端领域 30 个值得安装的 Agent Skills
前端
喵了几个咪7 分钟前
基于 Next.js 的 Headless CMS 前端架构:技术解析与二次开发导引
前端·javascript·架构
星栈8 分钟前
Makepad 不只是画界面:事件、状态和组件通信,到底怎么写
前端·rust
dsyyyyy11019 分钟前
只用HTML和CSS实现换一换效果
前端·css·html
青山Coding24 分钟前
Cesium应用(七):地形开挖的实现思路
前端·cesium
风骏时光牛马25 分钟前
Verilog常见问题及代码易错点梳理
前端
用户21816970493027 分钟前
swift (一) var let 字符串 int double 元组 数组[] 字典[:] 可选类型 if while for 函数func 可选类型?
前端
铁皮饭盒30 分钟前
Bun 都用 AI + Rust 重写了,咋不顺便把 Node.js 的 API 全兼容了?
前端·后端
gogoing32 分钟前
UnoCSS / Tailwind CSS 类名速查文档
css
menlong99934 分钟前
从Prompt狂欢到Agent轨道:20 万行代码真实项目的 AI 工作流实战
前端