Flex Layout

TechUI provides a responsive grid system based on a 24-column layout. By combining rows (TuiRow) and columns (TuiCol), you can quickly build neat and flexible page layouts.

Basic Usage

The grid system divides the container width into 24 equal parts. By setting the span property (1-24) of TuiCol, you can control the width proportion occupied by that column.

<template>
  <div class="demo-layout">
    <TuiRow>
      <TuiCol :span="24"><div class="content">col-24</div></TuiCol>
    </TuiRow>
    
    <TuiRow>
      <TuiCol :span="12"><div class="content">col-12</div></TuiCol>
      <TuiCol :span="12"><div class="content light">col-12</div></TuiCol>
    </TuiRow>
    
    <TuiRow>
      <TuiCol :span="8"><div class="content">col-8</div></TuiCol>
      <TuiCol :span="8"><div class="content light">col-8</div></TuiCol>
      <TuiCol :span="8"><div class="content">col-8</div></TuiCol>
    </TuiRow>
  </div>
</template>

<style scoped>
.content { min-height: 36px; background: rgba(0,146,255,0.2); text-align: center; line-height: 36px; border-radius: 4px; color: #fff; }
.light { background: rgba(0,146,255,0.1); }
.tui-row { margin-bottom: 20px; }
</style>

Column Spacing

By setting the gutter property on TuiRow, you can add horizontal spacing between the subordinate columns. The unit is pixels (px).

<template>
  <TuiRow :gutter="20">
    <TuiCol :span="6"><div class="content">col-6</div></TuiCol>
    <TuiCol :span="6"><div class="content">col-6</div></TuiCol>
    <TuiCol :span="6"><div class="content">col-6</div></TuiCol>
    <TuiCol :span="6"><div class="content">col-6</div></TuiCol>
  </TuiRow>
</template>

Hybrid Layout

You can freely combine columns of different widths within a single row, as long as the sum of span values equals 24.

<template>
  <TuiRow :gutter="20">
    <TuiCol :span="16"><div class="content">col-16</div></TuiCol>
    <TuiCol :span="8"><div class="content">col-8</div></TuiCol>
  </TuiRow>
  
  <TuiRow :gutter="20">
    <TuiCol :span="8"><div class="content">col-8</div></TuiCol>
    <TuiCol :span="8"><div class="content">col-8</div></TuiCol>
    <TuiCol :span="4"><div class="content">col-4</div></TuiCol>
    <TuiCol :span="4"><div class="content">col-4</div></TuiCol>
  </TuiRow>
</template>

Column Offset

By setting the offset property, you can specify the number of grid units a column should shift to the right. This is commonly used for creating whitespace or specific alignment effects.

<template>
  <TuiRow :gutter="20">
    <TuiCol :span="6"><div class="content">col-6</div></TuiCol>
    <TuiCol :span="6" :offset="6"><div class="content">col-6 offset-6</div></TuiCol>
  </TuiRow>

  <TuiRow :gutter="20">
    <TuiCol :span="6" :offset="6"><div class="content">col-6 offset-6</div></TuiCol>
    <TuiCol :span="6" :offset="6"><div class="content">col-6 offset-6</div></TuiCol>
  </TuiRow>
  
  <TuiRow :gutter="20">
    <TuiCol :span="12" :offset="6"><div class="content">Centered</div></TuiCol>
  </TuiRow>
</template>

Alignment

TuiRow is based on Flexbox layout and supports flexible horizontal and vertical alignment controls.

• justify (Horizontal Alignment): start, center, end, space-between, space-around, space-evenly
• align (Vertical Alignment): top, middle, bottom

<template>
  <TuiRow justify="center">
    <TuiCol :span="6"><div class="content">col-6</div></TuiCol>
    <TuiCol :span="6"><div class="content">col-6</div></TuiCol>
  </TuiRow>

  <TuiRow justify="space-between">
    <TuiCol :span="6"><div class="content">col-6</div></TuiCol>
    <TuiCol :span="6"><div class="content">col-6</div></TuiCol>
  </TuiRow>

  <TuiRow justify="space-evenly">
    <TuiCol :span="6"><div class="content">col-6</div></TuiCol>
    <TuiCol :span="6"><div class="content">col-6</div></TuiCol>
    <TuiCol :span="6"><div class="content">col-6</div></TuiCol>
  </TuiRow>
</template>

Responsive Layout

Following Bootstrap's responsive design, five responsive sizes are predefined: xs, sm, md, lg, xl. You can specify different span widths for different screen sizes.

Tip

TechUI's Row/Col responsiveness is based on the browser Viewport. If you have enabled the global large-screen adapter (TuiAdaptive), the physical pixels of the page may be locked, making responsive effects less apparent. To test responsive layouts, it is recommended to temporarily disable the adapter or use them in non-adapted areas.

<template>
  <TuiRow :gutter="10">
    <TuiCol :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
      <div class="content">Col</div>
    </TuiCol>
    <TuiCol :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
      <div class="content">Col</div>
    </TuiCol>
    <TuiCol :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
      <div class="content">Col</div>
    </TuiCol>
    <TuiCol :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
      <div class="content">Col</div>
    </TuiCol>
  </TuiRow>
</template>

Size	Screen Width	Description
xs	< 768px	Extra small screens (Mobile)
sm	≥ 768px	Small screens (Tablet)
md	≥ 992px	Medium screens (Desktop monitors)
lg	≥ 1200px	Large screens (Large desktop monitors)
xl	≥ 1920px	Extra large screens (4K/Widescreen)

API Reference

Row Props

Property	Type	Default	Description
gutter	Number	0	Grid spacing (px).
justify	String	'start'	Horizontal alignment. Options: start, end, center, space-around, space-between, space-evenly.
align	String	'top'	Vertical alignment. Options: top, middle, bottom.
tag	String	'div'	Custom HTML tag to be rendered.

Col Props

Property	Type	Default	Description
span	Number	24	Number of grid columns to occupy (0-24).
offset	Number	0	Number of grid units to indent from the left.
push	Number	0	Number of grid units to move to the right.
pull	Number	0	Number of grid units to move to the left.
tag	String	'div'	Custom HTML tag to be rendered.
xs	Number/Object	-	<768px responsive configuration (can be a number or an object containing span/offset).
sm	Number/Object	-	≥768px responsive configuration.
md	Number/Object	-	≥992px responsive configuration.
lg	Number/Object	-	≥1200px responsive configuration.
xl	Number/Object	-	≥1920px responsive configuration.