Container

Layout container with flexible options and responsive support

Basic Usage

Container

Demo will load when visible.

<template>
  <div style="width: 600px; border: 1px solid var(--tx-border-color); border-radius: 12px; overflow: hidden;">
    <TxContainer :padding="16">
      <TxRow :gutter="16">
        <TxCol :span="12">
          <div style="padding: 12px; border-radius: 10px; background: var(--tx-fill-color-light, #f5f7fa);">
            Left
          </div>
        </TxCol>
        <TxCol :span="12">
          <div style="padding: 12px; border-radius: 10px; background: var(--tx-fill-color-light, #f5f7fa);">
            Right
          </div>
        </TxCol>
      </TxRow>
    </TxContainer>
  </div>
</template>

Simplest container usage:

<template>
  <TxContainer>
    <p>Content inside the container</p>
  </TxContainer>
</template>

Container Types

Fluid Containers

Fill the full parent width:

<template>
  <TxContainer fluid>
    <p>Fluid container, width 100%</p>
  </TxContainer>
</template>

Fixed-width Containers

Set max width by breakpoints:

<template>
  <TxContainer max-width="1200px">
    <p>Container with max width 1200px</p>
  </TxContainer>
</template>

Responsive Containers

Different max widths across breakpoints:

<template>
  <TxContainer responsive>
    <p>Responsive container</p>
  </TxContainer>
</template>

Container Spacing

Padding

<template>
  <div class="padding-demo">
    <TxContainer padding="small">Small padding container</TxContainer>
    <TxContainer padding="medium">Medium padding container</TxContainer>
    <TxContainer padding="large">Large padding container</TxContainer>
    <TxContainer :padding="32">Custom padding container</TxContainer>
  </div>
</template>

Margin

<template>
  <TxContainer margin="auto">
    <p>Centered container</p>
  </TxContainer>
</template>

Grid System

Basic Grid

<template>
  <TxContainer>
    <TxRow>
      <TxCol :span="12">
        <div class="col-content">Left content</div>
      </TxCol>
      <TxCol :span="12">
        <div class="col-content">Right content</div>
      </TxCol>
    </TxRow>
  </TxContainer>
</template>

<style scoped>
.col-content {
  background: var(--tx-color-surface);
  padding: 16px;
  text-align: center;
  border-radius: 8px;
}
</style>

Grid Gutter

<template>
  <TxContainer>
    <TxRow :gutter="24">
      <TxCol :span="8">
        <div class="col-content">Column 1</div>
      </TxCol>
      <TxCol :span="8">
        <div class="col-content">Column 2</div>
      </TxCol>
      <TxCol :span="8">
        <div class="col-content">Column 3</div>
      </TxCol>
    </TxRow>
  </TxContainer>
</template>

Responsive Grid

<template>
  <TxContainer>
    <TxRow :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
      <TxCol :xs="24" :sm="12" :md="8" :lg="6">
        <div class="col-content">ResponsiveColumn 1</div>
      </TxCol>
      <TxCol :xs="24" :sm="12" :md="8" :lg="6">
        <div class="col-content">ResponsiveColumn 2</div>
      </TxCol>
      <TxCol :xs="24" :sm="12" :md="8" :lg="6">
        <div class="col-content">ResponsiveColumn 3</div>
      </TxCol>
      <TxCol :xs="24" :sm="12" :md="8" :lg="6">
        <div class="col-content">Responsive column 4</div>
      </TxCol>
    </TxRow>
  </TxContainer>
</template>

Layout Combinations

Page Layout

<template>
  <div class="page-layout">
    <!-- Header -->
    <TxContainer class="header" fluid>
      <TxRow align="middle" justify="space-between">
        <TxCol>
          <div class="logo">Logo</div>
        </TxCol>
        <TxCol>
          <nav class="nav">Navigation menu</nav>
        </TxCol>
      </TxRow>
    </TxContainer>
    
    <!-- Main content -->
    <TxContainer class="main-content">
      <TxRow :gutter="32">
        <TxCol :span="18">
          <main>Main content area</main>
        </TxCol>
        <TxCol :span="6">
          <aside>Sidebar</aside>
        </TxCol>
      </TxRow>
    </TxContainer>
    
    <!-- Footer -->
    <TxContainer class="footer" fluid>
      <footer>Footer content</footer>
    </TxContainer>
  </div>
</template>

<style scoped>
.header {
  background: var(--tx-color-surface);
  padding: 16px 0;
  border-bottom: 1px solid var(--tx-color-border);
}

.main-content {
  min-height: 500px;
  padding: 32px 0;
}

.footer {
  background: var(--tx-color-surface);
  padding: 24px 0;
  border-top: 1px solid var(--tx-color-border);
  text-align: center;
}
</style>

Card Layout

<template>
  <TxContainer>
    <TxRow :gutter="24">
      <TxCol :xs="24" :sm="12" :lg="8" v-for="item in items" :key="item.id">
        <TxCard>
          <h3>{{ item.title }}</h3>
          <p>{{ item.description }}</p>
        </TxCard>
      </TxCol>
    </TxRow>
  </TxContainer>
</template>

API Reference

Container Props

Prop	Type	Default	Description
fluid	`boolean`	`false`	Removes the max-width cap and lets the container fill its parent.
maxWidth	`string`	`'1200px'`	Max width used when `fluid` is disabled.
responsive	`boolean`	`false`	Enables the built-in responsive container width classes.
padding	`'small' \| 'medium' \| 'large' \| number`	`'medium'`	Horizontal padding preset or pixel value.
margin	`'auto' \| string \| number`	`'auto'`	Horizontal margin; `auto` centers the container.

Row Props

Prop	Type	Default	Description
gutter	`number \| Partial<Record<'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl', number>>`	`0`	Column gutter in pixels, optionally selected by breakpoint.
align	`'top' \| 'middle' \| 'bottom' \| 'stretch'`	`'stretch'`	Vertical alignment for row children.
justify	`'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'`	`'start'`	Horizontal distribution for row children.
wrap	`boolean`	`true`	Allows columns to wrap onto multiple lines.

Col Props

Prop	Type	Default	Description
span	`number`	`24`	Number of columns occupied in the 24-column grid.
offset	`number`	`0`	Left offset in the 24-column grid.
xs	`number`	-	Span used below 640px.
sm	`number`	-	Span used from 640px to 767px.
md	`number`	-	Span used from 768px to 1023px.
lg	`number`	-	Span used from 1024px to 1279px.
xl	`number`	-	Span used at 1280px and above.

Responsive Breakpoints

TouchX UI uses the following breakpoints:

/* Extra small screens */
@media (max-width: 639px) { /* xs */ }

/* Small screens */
@media (min-width: 640px) { /* sm */ }

/* Medium screens */
@media (min-width: 768px) { /* md */ }

/* Large screens */
@media (min-width: 1024px) { /* lg */ }

/* XL screens */
@media (min-width: 1280px) { /* xl */ }

Style Customization

CSS Variables

.custom-container {
  --tx-container-max-width: 1200px;
  --tx-container-padding: 16px;
  --tx-row-gutter: 16px;
}

Best Practices

Usage Tips

Responsive first: prefer the responsive grid system
Semantic layout: use semantic HTML tags
Consistent spacing: keep spacing rules consistent
Performance: avoid excessive container nesting

Common Layout Patterns

<template>
  <!-- Centered content -->
  <TxContainer max-width="800px" margin="auto">
    <div class="content">Main content</div>
  </TxContainer>
  
  <!-- Content with sidebar -->
  <TxContainer>
    <TxRow :gutter="32">
      <TxCol :span="16">Article content</TxCol>
      <TxCol :span="8">Sidebar</TxCol>
    </TxRow>
  </TxContainer>
  
  <!-- Three-column layout -->
  <TxContainer>
    <TxRow :gutter="24">
      <TxCol :span="6">Navigation</TxCol>
      <TxCol :span="12">Main content</TxCol>
      <TxCol :span="6">Details</TxCol>
    </TxRow>
  </TxContainer>
</template>

TouchX UI containers provide flexible layouts to quickly build responsive page structures.