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

相关推荐
Henrii_历小海7 小时前
WhatsApp Web 不是手机镜像:多设备协议、本地数据流与出海获客流水线
前端·智能手机
ayqy贾杰8 小时前
Claude Fable 5 提示词泄漏,抓紧学习下
前端·后端·面试
To_OC16 小时前
别再串行写 await 了,Promise.all 才是并行请求的正确打开方式
前端·javascript·promise
vipbic16 小时前
中后台越做越乱后,我用插件化把它救回来了
前端·vue.js
Hyyy16 小时前
Computer Use 适合做什么,不适合做什么——一次真实使用后的思考
前端
小和尚同志17 小时前
前端 AI 单元测试思考与落地
前端·人工智能·aigc
invicinble18 小时前
c端系统,其实更像一个信息展示平台
前端
李姆斯19 小时前
管理是否可以被完全量化
前端·产品经理·团队管理
名字还没想好☜19 小时前
Next.js 中间件实战:鉴权、重定向与 A/B 分流
开发语言·前端·javascript·中间件·react·next.js
广州灵眸科技有限公司20 小时前
瑞芯微RV1126B开发板(EASY-EAI-PI2) INI文件操作
java·前端·javascript·网络·人工智能