Grid 栅格

仿 Vuetify 的 12 列响应式 Flex 栅格：<mc-container> 控制页面宽度，<mc-row> 负责换行与 gutter，<mc-col> 声明列宽，<mc-spacer> 用于占据剩余空间。

断点采用移动优先策略：sm >= 600px、md >= 960px、lg >= 1280px、xl >= 1920px、xxl >= 2560px。未命中的断点会继承更小断点的布局。

基础用法

12

6

6

4

4

4

<div class="mc-demo mc-demo--column">
  <mc-container fluid class="mc-grid-demo__surface">
    <mc-row>
      <mc-col cols="12">
        <div class="mc-grid-demo__cell">12</div>
      </mc-col>
      <mc-col cols="6">
        <div class="mc-grid-demo__cell mc-grid-demo__cell--moss">6</div>
      </mc-col>
      <mc-col cols="6">
        <div class="mc-grid-demo__cell mc-grid-demo__cell--moss">6</div>
      </mc-col>
      <mc-col cols="4">
        <div class="mc-grid-demo__cell mc-grid-demo__cell--copper">4</div>
      </mc-col>
      <mc-col cols="4">
        <div class="mc-grid-demo__cell mc-grid-demo__cell--copper">4</div>
      </mc-col>
      <mc-col cols="4">
        <div class="mc-grid-demo__cell mc-grid-demo__cell--copper">4</div>
      </mc-col>
    </mc-row>
  </mc-container>
</div>

响应式列宽

cols=12 md=6 lg=4

cols=12 md=6 lg=4

cols=12 md=6 lg=4

<div class="mc-demo mc-demo--column">
  <mc-container fluid class="mc-grid-demo__surface">
    <mc-row>
      <mc-col cols="12" md="6" lg="4">
        <div class="mc-grid-demo__cell">cols=12 md=6 lg=4</div>
      </mc-col>
      <mc-col cols="12" md="6" lg="4">
        <div class="mc-grid-demo__cell mc-grid-demo__cell--moss">cols=12 md=6 lg=4</div>
      </mc-col>
      <mc-col cols="12" md="6" lg="4">
        <div class="mc-grid-demo__cell mc-grid-demo__cell--copper">cols=12 md=6 lg=4</div>
      </mc-col>
    </mc-row>
  </mc-container>
</div>

Offset 与 Order

offset=2

cols=4

order=last

默认顺序

order=first

<div class="mc-demo mc-demo--column">
  <mc-container fluid class="mc-grid-demo__surface">
    <mc-row>
      <mc-col cols="4" offset="2">
        <div class="mc-grid-demo__cell">offset=2</div>
      </mc-col>
      <mc-col cols="4">
        <div class="mc-grid-demo__cell mc-grid-demo__cell--moss">cols=4</div>
      </mc-col>
    </mc-row>
    <mc-row>
      <mc-col cols="4" order="last">
        <div class="mc-grid-demo__cell">order=last</div>
      </mc-col>
      <mc-col cols="4">
        <div class="mc-grid-demo__cell mc-grid-demo__cell--moss">默认顺序</div>
      </mc-col>
      <mc-col cols="4" order="first">
        <div class="mc-grid-demo__cell mc-grid-demo__cell--copper">order=first</div>
      </mc-col>
    </mc-row>
  </mc-container>
</div>

对齐与 Gutter

start

center

end

<div class="mc-demo mc-demo--column">
  <mc-container fluid class="mc-grid-demo__surface">
    <mc-row align="center" justify="space-between" dense class="mc-grid-demo__align-row">
      <mc-col cols="3">
        <div class="mc-grid-demo__cell mc-grid-demo__cell--short">start</div>
      </mc-col>
      <mc-col cols="3">
        <div class="mc-grid-demo__cell mc-grid-demo__cell--tall mc-grid-demo__cell--moss">center</div>
      </mc-col>
      <mc-col cols="3">
        <div class="mc-grid-demo__cell mc-grid-demo__cell--short mc-grid-demo__cell--copper">end</div>
      </mc-col>
    </mc-row>
  </mc-container>
</div>

dense 会把 gutter 缩小到 8px，no-gutters 会完全移除行列间距。

Spacer

<div class="mc-demo mc-demo--column">
  <mc-container fluid class="mc-grid-demo__surface">
    <mc-row align="center" no-gutters class="mc-grid-demo__toolbar">
      <mc-col cols="auto">
        <mc-button size="small">返回</mc-button>
      </mc-col>
      <mc-spacer />
      <mc-col cols="auto">
        <mc-button size="small" variant="primary">保存</mc-button>
      </mc-col>
    </mc-row>
  </mc-container>
</div>

API

McContainer Props

名称	类型	默认	说明
fluid	boolean	false	是否使用 100% 宽度，不套用断点最大宽度
tag	string	'div'	渲染的 HTML 标签

默认插槽放置 mc-row 或任意内容。

McRow Props

名称	类型	默认	说明
tag	string	'div'	渲染的 HTML 标签
dense	boolean	false	使用 8px gutter
no-gutters	boolean	false	移除 row 负边距和 col 内边距
align	'start' | 'center' | 'end' | 'baseline' | 'stretch'	-	设置 align-items
align-sm / align-md / align-lg / align-xl / align-xxl	同 align	-	在指定断点及以上设置 align-items
justify	'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly'	-	设置 justify-content
justify-sm / justify-md / justify-lg / justify-xl / justify-xxl	同 justify	-	在指定断点及以上设置 justify-content

默认插槽放置 mc-col、mc-spacer 或其他 flex 子元素。

McCol Props

名称	类型	默认	说明
tag	string	'div'	渲染的 HTML 标签
cols	boolean | number | string	-	默认列宽，支持 1 - 12 与 'auto'；不传时为等分列
sm / md / lg / xl / xxl	boolean | number | string	-	指定断点及以上的列宽
offset	number | string	-	默认左侧偏移，支持 0 - 12
offset-sm / offset-md / offset-lg / offset-xl / offset-xxl	number | string	-	指定断点及以上的左侧偏移
order	number | string	-	默认排序，支持 0 - 12、'first'、'last'
order-sm / order-md / order-lg / order-xl / order-xxl	number | string	-	指定断点及以上的排序
align-self	'auto' | 'start' | 'center' | 'end' | 'baseline' | 'stretch'	-	设置当前列的 align-self
align-self-sm / align-self-md / align-self-lg / align-self-xl / align-self-xxl	同 align-self	-	指定断点及以上的 align-self

默认插槽放置列内容。

McSpacer Props

名称	类型	默认	说明
tag	string	'div'	渲染的 HTML 标签

默认插槽可留空；组件本身会通过 flex-grow: 1 占据剩余空间。