搜索 - 腾讯云开发者社区-腾讯云

文章/答案/技术大牛

发布

来自专栏GavinUI
[ HTML5 ] WEB 常用页面布局梳理和分析
.wrapper-3{ position: relative; display: grid; width: 100%; grid-template-rows: 100px grid-template-columns: 200px auto 200px; background-color: antiquewhite; margin-top: 20px; } .wrapper -3 .left-3{ height: 100%; background-color: aqua; } .wrapper-3 .right-3{ height: 100%; background-color: aqua; } .wrapper-3 .center-3{ height: 100%; background-color: blueviolet; }

left
<section class
1.6K113发布于 2021-07-26
来自专栏前端杂货铺-Gopal
最强大的 CSS 布局 —— Grid 布局
代码以及效果如下图所示： .wrapper-3 { display: grid; grid-template-columns: 200px 1fr 2fr; grid-gap: 5px; ; align-items: start | end | center | stretch; } 其代码实现以及效果如下： .wrapper, .wrapper-1, .wrapper-2, .wrapper justify-items: start; } .wrapper-1 { justify-items: end; } .wrapper-2 { justify-items: center; } .wrapper 属性同理，只是方向为垂直方向 start - 对齐容器的起始边框 end - 对齐容器的结束边框 center - 容器内部居中 .wrapper, .wrapper-1, .wrapper-2, .wrapper 项目与项目的间隔相等，项目与容器边框之间没有间隔 space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔 stretch - 项目大小没有指定时，拉伸占据整个网格容器 .wrapper
33.1K64发布于 2020-09-24
来自专栏采云轩
那些与 IE 相伴的日子
.wrapper-3 { height: 200px; width: 80%; margin: 20px auto; background-color: wheat;
1.2K20发布于 2021-03-16

[ HTML5 ] WEB 常用页面布局梳理和分析

最强大的 CSS 布局 —— Grid 布局

那些与 IE 相伴的日子

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐