栅格 Grid

流体风格的布局容器。

basic

设定子组件之间的间距。

预览代码

<script setup lang="ts">
  defineOptions({ name: 'ex-grid-basic' })
</script>

<template>
  <g-grid container justify-content="center" :spacing="3">
    <g-grid :xs="6">
      <g-card shadow />
    </g-grid>

    <g-grid :xs="6">
      <g-card shadow />
    </g-grid>

    <g-grid :xs="6">
      <g-card shadow />
    </g-grid>
  </g-grid>
</template>

<style lang="scss" scoped>
.card {
  width: 100%;
  height: 100px;
}
</style>

fluid

自动换行。

预览代码

<script setup lang="ts">
  defineOptions({ name: 'ex-grid-fluid' })
</script>

<template>
  <g-grid container justify-content="center" :spacing="3">
    <g-grid :xs="24">
      <g-card shadow />
    </g-grid>

    <g-grid :xs="12">
      <g-card shadow />
    </g-grid>

    <g-grid :xs="12">
      <g-card shadow />
    </g-grid>

    <g-grid :xs="6">
      <g-card shadow />
    </g-grid>

    <g-grid :xs="6">
      <g-card shadow />
    </g-grid>

    <g-grid :xs="6">
      <g-card shadow />
    </g-grid>

    <g-grid :xs="6">
      <g-card shadow />
    </g-grid>

    <g-grid :xs="6">
      <g-card shadow />
    </g-grid>

    <g-grid :xs="12">
      <g-card shadow />
    </g-grid>

    <g-grid :xs="6">
      <g-card shadow />
    </g-grid>
  </g-grid>
</template>

responsive

在不同的屏幕宽度下展示不同的布局。

预览代码

<script setup lang="ts">
  defineOptions({ name: 'ex-grid-responsive' })
</script>

<template>
  <g-grid container justify-content="center" :spacing="3">
    <g-grid :xs="24" :md="12">
      <g-card shadow />
    </g-grid>

    <g-grid :xs="24" :md="12">
      <g-card shadow />
    </g-grid>

    <g-grid :xs="24" :md="6">
      <g-card shadow />
    </g-grid>

    <g-grid :xs="24" :md="6">
      <g-card shadow />
    </g-grid>

    <g-grid :xs="24" :md="6">
      <g-card shadow />
    </g-grid>
  </g-grid>
</template>

hidden

当单位大小为 0 时会自动隐藏当前元素。

预览代码

<script setup lang="ts">
  defineOptions({ name: 'ex-grid-hidden' })
</script>

<template>
  <g-grid container justify-content="center" :spacing="3">
    <g-grid :xs="12" :sm="0">
      <g-card shadow />
    </g-grid>

    <g-grid :xs="12" :sm="0">
      <g-card shadow />
    </g-grid>

    <g-grid :xs="24">
      <g-card shadow />
    </g-grid>

    <g-grid :xs="24">
      <g-card shadow />
    </g-grid>
  </g-grid>
</template>

auto width

自动分配剩余宽度。

预览代码

<script setup lang="ts">
  defineOptions({ name: 'ex-grid-auto-width' })
</script>

<template>
  <g-grid container justify-content="center" :spacing="3">
    <g-grid xs>
      <g-card shadow />
    </g-grid>

    <g-grid xs>
      <g-card shadow />
    </g-grid>

    <g-grid xs>
      <g-card shadow />
    </g-grid>
  </g-grid>

  <g-grid container justify-content="center" :spacing="3">
    <g-grid xs>
      <g-card shadow />
    </g-grid>

    <g-grid :xs="12">
      <g-card shadow />
    </g-grid>

    <g-grid xs>
      <g-card shadow />
    </g-grid>
  </g-grid>
</template>

Attributes

属性	描述	类型	推荐值	默认
container	容器属性	`boolean`	-	`false`
spacing	子组件间距	`number`	-	`0`
justifyContent	css 属性"justify-content"	`string`	`justify-content`	`flex-start`
alignItems	css 属性"align-items"	`string`	`align-items`	`stretch`
alignContent	css 属性"align-content"	`string`	`align-content`	`stretch`
direction	css 属性"flex-direction"	`string`	`flex-direction`	`row`
wrap	css 属性"flex-wrap"	`string`	`flex-wrap`	`wrap`
xs	栅格宽度，影响 xs 断点与更宽的屏幕	`number` / `boolean`	`0-24,true,false`	`false`
sm	栅格宽度，影响 sm 断点与更宽的屏幕	`number` / `boolean`	`0-24,true,false`	`false`
md	栅格宽度，影响 md 断点与更宽的屏幕	`number` / `boolean`	`0-24,true,false`	`false`
lg	栅格宽度，影响 lg 断点与更宽的屏幕	`number` / `boolean`	`0-24,true,false`	`false`
xl	栅格宽度，影响 xl 断点与更宽的屏幕	`number` / `boolean`	`0-24,true,false`	`false`

栅格 Grid ​

basic

fluid

responsive

hidden

auto width

Attributes

栅格 Grid