--- meta: title: Cols description: A flexible column layout component that distributes children across multiple columns with configurable layouts, gaps, borders, and padding options. layout: component --- ```html:preview 1 2 3 4 5 ``` ## Examples ### Equal Column Layout Create equal-width columns by using a layout pattern like "1,1" or "1,1,1". ```html:preview Column 1 Column 2 ``` ### Three Equal Columns ```html:preview Column 1 Column 2 Column 3 ``` ### Asymmetric Layout Use different numbers in the layout to create columns of different widths. The pattern "2,1" creates a layout where the first column is twice as wide as the second. ```html:preview Wide Column (2 units) Narrow Column (1 unit) ``` ### Three Column Asymmetric ```html:preview Widest Column (3 units) Medium Column (2 units) Narrowest Column (1 unit) ``` ### Repeating Pattern The layout pattern repeats for additional children. With "2,1", items cycle through the pattern. ```html:preview 1 (2 units) 2 (1 unit) 3 (2 units) 4 (1 unit) 5 (2 units) ``` ### With Borders Use the `border` attribute to add borders around columns. ```html:preview Column 1 Column 2 Column 3 ``` ### Without Gap Use the `no-gap` attribute to remove spacing between columns. ```html:preview No Gap Between Columns ``` ### With Padding Use the `pad` attribute to add padding inside each column. ```html:preview Padded Column 1 Padded Column 2 ``` ### Horizontal Padding Only Use the `pad-x` attribute to add only horizontal padding. ```html:preview Horizontal Padding Horizontal Padding ``` ### Vertical Padding Only Use the `pad-y` attribute to add only vertical padding. ```html:preview Vertical Padding Vertical Padding ``` ### With Dividers Use the `divide` attribute to add dividers between columns. ```html:preview Column 1 Column 2 Column 3 ``` ### Sticky Sidebar Create a sticky sidebar layout for scrollable content. ```html:preview
Sticky Sidebar
Navigation
Scrollable Content
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
 ``` ### Dashboard Layout Combine multiple features for a complete dashboard layout. ```html:preview

Main Content

This is the main content area with a 2:1 ratio.

Sidebar

This is a narrower sidebar.

 ```