---
title: Container
description: Container is a flexible layout component that provides spacing, alignment, and responsive behavior for its children.
category: Layout
related: [Panel, Grid, GridContainer, Spacer]
commonPatterns: [form-layout, page-layout, card-layout]
---

Source: https://clickhouse.design/click-ui/container

# Container

Container is a flexible layout component that provides spacing, alignment, and responsive behavior for its children. It has no visible characteristics and is the foundation for most layouts in Click UI.

## Example

## Props

| Prop           | Type                                                                                                       | Default value  | Description                                                                      |
| -------------- | ---------------------------------------------------------------------------------------------------------- | -------------- | -------------------------------------------------------------------------------- |
| orientation    | `"horizontal" \| "vertical"`                                                                               | `"horizontal"` | Layout direction - whether children are arranged horizontally or vertically      |
| gap            | `"none" \| "xxs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxl"`                                         | `"none"`       | Spacing between child elements using predefined size tokens                      |
| padding        | `"none" \| "xxs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxl"`                                         | `"none"`       | Internal padding of the container using predefined size tokens                   |
| alignItems     | `"start" \| "center" \| "end" \| "stretch"`                                                                | `"start"`      | Vertical alignment of items within the container (cross-axis alignment)          |
| justifyContent | `"center" \| "space-between" \| "space-around" \| "space-evenly" \| "start" \| "end" \| "left" \| "right"` | `"start"`      | Horizontal alignment of items within the container (main-axis alignment)         |
| fillWidth      | `boolean`                                                                                                  | `false`        | Whether the container should take up the full width of its parent                |
| fillHeight     | `boolean`                                                                                                  | `false`        | Whether the container should take up the full height of its parent               |
| wrap           | `"nowrap" \| "wrap" \| "wrap-reverse"`                                                                     | `"nowrap"`     | Whether child elements should wrap to the next line when space is limited        |
| maxWidth       | `string`                                                                                                   | `""`           | Maximum width of the container (e.g., "800px", "100%", "50rem")                  |
| minWidth       | `string`                                                                                                   | `""`           | Minimum width of the container (e.g., "200px", "20rem")                          |
| maxHeight      | `string`                                                                                                   | `""`           | Maximum height of the container (e.g., "500px", "50vh")                          |
| minHeight      | `string`                                                                                                   | `""`           | Minimum height of the container (e.g., "100px", "10rem")                         |
| grow           | `"0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6"`                                                            | `"0"`          | Flex grow factor - how much the container should grow relative to siblings       |
| shrink         | `"0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6"`                                                            | `"1"`          | Flex shrink factor - how much the container should shrink relative to siblings   |
| component      | `ElementType`                                                                                              | `"div"`        | HTML element type to render as the container (e.g., "div", "section", "article") |
| isResponsive   | `boolean`                                                                                                  | `false`        | Whether the container should adapt its layout based on screen size               |
| overflow       | `string`                                                                                                   | `"visible"`    | CSS overflow property value (e.g., "visible", "hidden", "scroll", "auto")        |
| display        | `string`                                                                                                   | `undefined`    | CSS display property value (e.g., "flex", "grid", "block", "inline-block")       |

```tsx
import { Container } from '@clickhouse/click-ui'

<Container 
orientation='vertical' 
gap='md' 
padding='lg'
alignItems='center'
justifyContent='space-between'
>
{/* children */}
</Container>
```

## Quick start

Use Container for flexible layouts with spacing and alignment:

```tsx
<Container orientation='vertical' gap='md' padding='lg'>
<Text>Content</Text>
<Button label='Action' />
</Container>
```

## Related components

- **Panel**: Use Container inside Panel for structured content areas
- **Grid**: Use Grid for two-dimensional layouts
- **GridContainer**: Use GridContainer for CSS Grid-based layouts
- **Spacer**: Use Spacer for simple vertical spacing between elements

## Common use cases

### Vertical form layout

```tsx
import { Container, TextField, Button } from '@clickhouse/click-ui'

function FormLayout() {
return (
  <Container orientation='vertical' gap='md' padding='lg'>
    <TextField id='name' label='Name' value={name} onChange={setName} />
    <TextField id='email' label='Email' value={email} onChange={setEmail} />
    <Container orientation='horizontal' gap='sm' justifyContent='end'>
      <Button label='Cancel' />
      <Button type='primary' label='Submit' />
    </Container>
  </Container>
)
}
```

### Horizontal button group

```tsx
import { Container, Button } from '@clickhouse/click-ui'

function ButtonGroup() {
return (
  <Container orientation='horizontal' gap='sm' justifyContent='center'>
    <Button label='Previous' />
    <Button type='primary' label='Next' />
  </Container>
)
}
```

### Centered content

```tsx
import { Container, Text, Button } from '@clickhouse/click-ui'

function CenteredLayout() {
return (
  <Container 
    orientation='vertical' 
    gap='md' 
    alignItems='center' 
    justifyContent='center'
    fillHeight
  >
    <Text size='lg'>Centered Content</Text>
    <Button label='Action' />
  </Container>
)
}
```