Obsidian's second-earliest iteration of the now-popular column layout, after ITS Theme's. You can place content side-by-side using the [!columns] container. This allows for more complex and visually appealing layouts directly within your notes by turning nested callouts into flexible columns: ```markdown > [!columns] > >[!note] Column 1 > Content for the first column > > >[!tip] Column 2 > Content for the second column > > >[!example] Column 3 > Content for the third column ``` > [!columns] > >[!note] Column 1 > Content for the first column > > >[!tip] Column 2 > Content for the second column > > >[!example] Column 3 > Content for the third column - Automatically distributes child callouts into columns - Responsive design adapts to pane width - Customizable top margin for spacing The columns can also be manipulated into your ideal size by using the column-specific metadata-classes. #### Basic Two-Column Layout To create a simple two-column layout, place two or more callouts inside a [!columns] block. By default, if no widths are specified, each column will share the available space equally. > [!columns] > > [!note] Equal Width Column > > This is the first column. > > > [!info] Equal Width Column > > This is the second column. ```md > [!columns] > > [!note] Equal Width Column > > This is the first column. > > > [!info] Equal Width Column > > This is the second column. ``` #### Controlling Column Widths You can control the relative width of each column by adding metadata to the callout's title. The width is based on a ratio, determining how the columns share the available space. To set a column's width, add a pipe (|) after the callout type, followed by one of the metadata classes below. The syntax is |width-N or the shorthand |wN, where N is a number (e.g., from 1 to 5). - **Syntax:** [!callout-type|metadata] - **Example:** [!info|width-3] The width system is based on a ratio. If you have one column with width-2 and another with width-1, the total space is divided into 3 parts. The first column will take up 2/3 of the space, and the second will take up 1/3. If a column has no width metadata, it defaults to a width of **1**. #### Supported Width Classes | Class | Shorthand | Description | | ------- | --------- | ------------------------------------------------------------------ | | width-1 | w1 | Sets the column to a relative width of **1**. This is the default. | | width-2 | w2 | Sets the column to a relative width of **2**. | | width-3 | w3 | Sets the column to a relative width of **3**. | | width-4 | w4 | Sets the column to a relative width of **4**. | | width-5 | w5 | Sets the column to a relative width of **5**. | In this example, the first column is set to be twice as wide as the second. > [!columns] > > [!note|width-2] Width 2 > > This column takes up 2 parts of the available space. > > > [!info|w1] Width 1 > > This column takes up 1 part of the available space. ```md > [!columns] > > [!note|width-2] Width 2 > > This column takes up 2 parts of the available space. > > > [!info|w1] Width 1 > > This column takes up 1 part of the available space. ``` #### Mixing Sized and Unsized Columns You can mix columns with a defined width and columns without one. If no width is specified, the column defaults to a base width of **1**. This example shows a wide column next to a default-width column. > [!columns] > > [!tip|width-4] Width 4 > > This column is significantly wider. > > > [!info] No Set Width > > This column defaults to a width of 1. ```md > [!columns] > > [!tip|width-4] Width 4 > > This column is significantly wider. > > > [!info] No Set Width > > This column defaults to a width of 1. ``` #### Combining Multiple Columns You are not limited to two columns. You can combine three or more callouts with different widths to create more complex layouts. The total available space will be divided according to the sum of all width ratios. In this case, the space is divided into 6 parts (3 + 1 + 2). > [!columns] > > [!info|width-3] Width 3 > > This column takes up 3/6 (50%) of the space. > > > [!success|width-1] Width 1 > > This column takes up 1/6 of the space. > > > [!note|width-2] Width 2 > > This column takes up 2/6 of the space. ```md > [!columns] > > [!info|width-3] Width 3 > > This column takes up 3/6 (50%) of the space. > > > [!success|width-1] Width 1 > > This column takes up 1/6 of the space. > > > [!note|width-2] Width 2 > > This column takes up 2/6 of the space. ```