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

相关推荐
2401_897592641 分钟前
系统架构演进:从单体到微服务的智能转型
前端·微服务·架构·系统架构
呵呵哒( ̄▽ ̄)"43 分钟前
React-Cropper (#^.^#) 特制裁剪图片组件^_^+腾讯云
前端·react.js·前端框架
小彭努力中1 小时前
13.在 Vue 3 中使用 ECharts 实现桑基图
前端·javascript·vue.js·echarts
2401_897605651 小时前
OpenAI进军实体机器人:GPT赋能的智能未来
前端·gpt·机器人
风茫1 小时前
【useCallback Hook】在多次渲染中缓存组件中的函数,避免重复创建函数
前端·javascript·react.js·usecallback
ネф̶-イω9 小时前
登录、注册、忘记密码、首页HTML模板
前端·css·html
忘不了情10 小时前
react中,使用antd的Upload组件上传zip压缩包文件
前端·javascript·react.js
冰淇淋百宝箱10 小时前
GraphRAG: Auto Prompt Tuning 实践
java·服务器·前端
记得开心一点嘛11 小时前
uniapp --- 配置文件
前端·typescript·uni-app
Bingo_BIG11 小时前
uni-app vue3 常用页面 组合式api方式
前端·javascript·uni-app