Grid 布局网格
基础用法
代码演示
网格1
网格2
网格3
vue
<template>
<s-grid :template-columns="['1fr', '1fr']">
<s-cell style="background:red;">网格1</s-cell>
<s-cell style="background:blue;">网格2</s-cell>
<s-cell style="background:yellow;">网格3</s-cell>
</s-grid>
</template>
API
Grid Attributes
名称 | 说明 | 类型 | 默认值 |
---|---|---|---|
template-columns | 同 CSS 属性 grid-template-columns | Array[string]| number|string | 'repeat(24, 1fr)' |
template-rows | 同 CSS 属性 grid-template-rows | Array[string]| number|string | '' |
gap | 同 CSS 属性 grid-gap | Array[string]| number|string | 0 |