Multiple Columns

Display text or content through multiple columns.

Example

Column 1
This is the content of column 1

Column 2
This is the content of column 2

Column 3
This is the content of column 3

Code:

<Columns>
  <Column>
    **Column 1**
    This is the content of column 1
  </Column>
  <Column>
    **Column 2**
    This is the content of column 2
  </Column>
  <Column>
    **Column 3**
    This is the content of column 3
  </Column>
</Columns>

The column content follows markdown syntax.

Defining Width

Column 1
This is the content of the first column, with a width of 20%.

Column 2
This is the content of the second column, with a width of 20%.

Column 3
This is the content of the third column, with a width of 300px.

Code:

<Columns>
  <Column width="20%">
    **Column 1**
    This is the content of the first column, with a width of 20%.
  </Column>
  <Column width="20%">
    **Column 2**
    This is the content of the second column, with a width of 20%.
  </Column>
  <Column width={300}>
    **Column 3**
    This is the content of the third column, with a width of 300px.
  </Column>
</Columns>

Using Tailwind CSS Styles with the `class` Attribute

The Columns component supports custom styling with Tailwind CSS. Both Columns and Column components can use the class attribute to add Tailwind CSS classes.

Photographs of scenery

This photograph was captured by André Cook

Photographs of scenery

This photograph was captured by André Cook

Code：

<Columns>
    <Column class="bg-gray-100 p-3 rounded">
        <p class="text-lg font-bold text-pink-500">
            Photographs of scenery
        </p>
        This photograph was captured by André Cook
        
        ![](https://api.apifox.com/api/v1/projects/4444182/resources/439706/image-preview)
    </Column>
    <Column class="bg-gray-100 p-3 rounded">
        <p class="text-lg font-bold text-orange-500">
            Photographs of scenery
        </p>
        This photograph was captured by André Cook
        
        ![](https://api.apifox.com/api/v1/projects/4444182/resources/439706/image-preview)
    </Column>
</Columns>

Defining Styles Directly with `style`

Photographs of scenery

This photograph was captured by André Cook

Photographs of scenery

This photograph was captured by André Cook

Code：

<Columns>
    <Column style="background-color: #f0f0f0; padding: 10px;">
        <p class="text-lg font-bold text-pink-500">
            Photographs of scenery
        </p>
        This photograph was captured by André Cook
        
        ![](https://api.apifox.com/api/v1/projects/4444182/resources/439706/image-preview)
    </Column>
    <Column style="background-color: #f0f0f0; padding: 10px;">
        <p class="text-lg font-bold text-orange-500">
            Photographs of scenery
        </p>
        This photograph was captured by André Cook
        
        ![](https://api.apifox.com/api/v1/projects/4444182/resources/439706/image-preview)
    </Column>
</Columns>

Parameter Description

Column

width

number

optional

Width: supports percentage and pixel values, such as "30%" or "240". Defaults to automatic equal column distribution.

class

string

optional

Assign one or more class names to the HTML element, supporting Tailwind CSS.

style

string

optional

Inline style attribute, allows you to directly define CSS styles.

Example#

Defining Width#

Using Tailwind CSS Styles with the class Attribute#

Defining Styles Directly with style#

Parameter Description#

Example

Defining Width

Using Tailwind CSS Styles with the `class` Attribute

Defining Styles Directly with `style`

Parameter Description