煮茶忘放糖的博客

简简单单写点文章

Vue3+TS Naive Ul 栅格的用法

<n-grid cols="18 400:12 600:10 800:10 1000:12">
<n-gi offset="6 400:1 600:1 800:2 1000:4" span="6 400:10 600:8 800:6 1000:4">
<div class="login-main"></div>
</n-gi>
</n-grid>

cols 中 第一个代表默认格数,然后在不同屏幕宽度下显示多少格,400px时总共有12格。

offset 代表左偏移格数,默认6格,400px时变成占据1格。
span 代表自身占据格数,默认6格,400px时变成占据10格。

在相同宽度情况下:offset+span+右边offset=cols,可以达到居中效果。