Grid 栅格

24 分栏布局，由 DanRow / DanCol 组成。

基础用法

span=12

span=12

span=8

span=8

span=8

<script setup lang="ts">
import { DanCol, DanRow } from '@dandan-ui/ui'
</script>

<template>
  <DanRow :gutter="16">
    <DanCol :span="12">
      <div
        style="
          padding: 12px;
          background: var(--dan-color-primary-light);
          border-radius: 6px;
          text-align: center;
        "
      >
        span=12
      </div>
    </DanCol>
    <DanCol :span="12">
      <div
        style="
          padding: 12px;
          background: var(--dan-color-fill);
          border-radius: 6px;
          text-align: center;
        "
      >
        span=12
      </div>
    </DanCol>
  </DanRow>
  <DanRow :gutter="16" style="margin-top: 16px">
    <DanCol :span="8">
      <div
        style="
          padding: 12px;
          background: var(--dan-color-fill);
          border-radius: 6px;
          text-align: center;
        "
      >
        span=8
      </div>
    </DanCol>
    <DanCol :span="8">
      <div
        style="
          padding: 12px;
          background: var(--dan-color-primary-light);
          border-radius: 6px;
          text-align: center;
        "
      >
        span=8
      </div>
    </DanCol>
    <DanCol :span="8">
      <div
        style="
          padding: 12px;
          background: var(--dan-color-fill);
          border-radius: 6px;
          text-align: center;
        "
      >
        span=8
      </div>
    </DanCol>
  </DanRow>
</template>

Row Props

属性	说明	类型	默认值
gutter	列间距（px）	number	0
justify	水平排列	'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'	'start'
align	垂直对齐	'top' | 'middle' | 'bottom' | 'stretch'	'top'

Col Props

属性	说明	类型	默认值
span	栅格占据份数（0–24）	number	24
offset	左侧间隔份数	number	0