grid - 初识

时间:2023-03-08 23:09:08
grid - 初识

Grid有三个参数

目前介绍以下两种:grid、inline-grid

<view class="grid">
<view class='grid-row'>1</view>
<view class='grid-row'>2</view>
<view class='grid-row'>3</view>
</view>
page {
color: #fff;
} .grid {
line-height: 50px;
display: grid;
grid-gap: 1px;
} .grid-row {
text-align: center;
background-color: #d94a6a;
}

grid是根据内容来收缩的,你可以试试在子元素使用内边距(padding) 或者 外边距(margin)

inline-grid和inline-block会有什么联系呢?

inline-block可以设置宽高,且为行内块