--- 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 fullWidth: true --- ```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) ``` ### Stacking Order Use `stack-at` to name the container width the columns collapse to a single column below, as one of the container sizes (`sm`, `smp`, `ph`, `md`, `lg`, `hd`, `3k`, `4k`). Children can then declare a `stack-order` to say where they belong in that single column, which lets a sidebar sit second in the markup but move to the top once stacked. `stack-order` takes `first`/`high` (before unordered children), `last`/`low` (after them), or any integer for finer control. It has no effect while the columns are side by side, so the reading order of your markup is what wide screens get. ```html:preview Main content — first in the markup, second when stacked Sidebar — second in the markup, first when stacked ``` ### Splitting a Column by Priority Add `stack-split` to a column to break it apart when stacked. Its children stay together as one column on wide screens, then each becomes a column in its own right and takes its own `stack-order`, so high priority content can move above the main column while low priority content drops below it. ```html:preview Databases — the main column
Usage — above the main column when stacked Tutorials — below the main column when stacked
``` Keep `stack-split` on a plain wrapper element rather than a component: `zn-cols` lays it out as a column (`display: flex` in a column, with the standard gap) and then removes its box entirely while stacked, so any styling of its own would disappear along with it. `stack-at` defaults to `lg` when any child declares `stack-order` or `stack-split`. Set it explicitly at or above the width where your columns would otherwise wrap on their own, so that reordering is already in effect by the time the layout breaks. ### 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.

 ```