微信小程序: 使用grid进行网格布局
grid与flex一样用于页面布局。flex用于一维布局,grid用于二维布局。所以有时候一些网格状的布局相对于grid来说会更加方便。注意,设为网格布局以后,容器子元素(项目)的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。这里简单使用grid进行网格布局的示例:效果图:&l...
·
grid
与flex
一样用于页面布局。flex
用于一维布局,grid
用于二维布局。所以有时候一些网格状的布局相对于grid
来说会更加方便。
注意,设为网格布局以后,容器子元素(项目)的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
这里简单使用grid进行网格布局的示例:
效果图:
<div id="container">
<div class="item" wx:for="123456789">{{item}}</div>
</div>
#container{
display: grid;
margin-top: 10rpx;
grid-template-columns:repeat(auto-fill,100px);/** 平铺宽度为100px的单元格 */
grid-template-rows: 100px;/** 设置高度为100px */
grid-auto-rows: 100px;/** 当容易高度不够时,多余的组件高度将怎么分配,默认的高度由单元格内容决定 */
justify-content: center;/** 水平居中 */
grid-gap: 10rpx;/** 水平和垂直间距为10rpx*/
padding: 10rpx;
}
.item {
font-size: 4em;
border: 1px solid #e5e4e9;
display: flex;
align-items: center;
justify-content: center;
}
更多推荐
已为社区贡献1条内容
所有评论(0)