Row
A container that wraps Columns and auto-calculates their widths.
Usage
<template>
<Layout>
<Container>
<Row>
<Column>First</Column>
<Column>Second</Column>
<Column>Third</Column>
</Row>
</Container>
</Layout>
</template>
Each Column automatically gets a 200px width. Row also uses font-size: 0 to eliminate inline-block whitespace gaps between columns.
Props
width
Type: string | number
Default: null
Explicit Row width used as the source for column width calculations. When set, this overrides the inherited width from any ancestor.
The Tailwind-first equivalent is to put a width utility on the row — child Columns will walk up to the nearest sized ancestor and use that as the source for their width calculations:
<template>
<Container>
<Row class="max-w-100">
<Column>200px wide</Column>
<Column>200px wide</Column>
</Row>
</Container>
</template>
Use the width prop when you'd rather pass a number:
<template>
<Container>
<Row :width="400">
<Column>200px wide</Column>
<Column>200px wide</Column>
</Row>
</Container>
</template>
When neither is set, Columns inherit from the nearest sized ancestor — Container, Section, or a parent Column or Row.
cols
Type: number
Default: null
Override the auto-detected column count. Row normally counts its direct children to determine how many columns there are — set this manually when auto-detection doesn't match your layout, e.g. with v-if or v-for.
<template>
<Row :cols="items.length">
<Column v-for="item in items" :key="item.id">
{{ item.text }}
</Column>
</Row>
</template>
outlookFallback
Type: boolean
Default: true
Toggle Outlook (MSO) and VML fallback markup for this row and its descendants. Set this to false to use modern markup and skip the MSO <table><tr> wrapper, VML shapes, xmlns:v / xmlns:o attributes, and mso-specific CSS in descendant columns.
<template>
<Row :outlook-fallback="false">
<Column>First</Column>
<Column>Second</Column>
</Row>
</template>
Without the MSO ghost table, columns will stack in Outlook instead of sitting side by side. Maizzle warns at build time when this happens.