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

相关推荐
和和和21 小时前
🗣️面试官: 那些常见的前端面试场景问题
前端·javascript·面试
lxp19974121 小时前
vue笔记摘要-更新中
前端·vue.js·笔记
Oriental21 小时前
URL解码踩坑记录
前端·后端
San3021 小时前
ES6+ 新特性解析:让 JavaScript 开发更优雅高效
前端·javascript·ecmascript 6
Heo21 小时前
简单聊聊webpack摇树的原理
前端·javascript·面试
少卿21 小时前
React 日历组件完全指南:从网格生成到农历转换
前端·react.js
程序员鱼皮1 天前
Gemini 3.0 发布!
前端·ai编程·gemini
程序员鱼皮1 天前
Gemini 3.0 炸裂发布!前端又死了???
前端·ai·程序员·互联网·代码
xiangxiongfly9151 天前
CSS svg
前端·css·svg
山依尽1 天前
如何将一个 React SPA 项目迁移到 Next.js 服务端渲染
前端·next.js