Skip to content

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-columnsArray[string]| number|string'repeat(24, 1fr)'
template-rows同 CSS 属性 grid-template-rowsArray[string]| number|string''
gap同 CSS 属性 grid-gapArray[string]| number|string0