Columns must always be wrapped within rows and are used to layout content vertically or horizontally.
Denali’s layout components are built using flexbox to help you layout content with ease. Unfamiliar with flexbox? Read this guide before getting started.
Columns should be added as direct children within rows using the class .col. By default a column’s width spans 100% of the parent row. If multiple columns are placed within a row, the space within the row will be evenly divided so that each column is given equal width.
Denali’s grid supports up to 12 columns. The amount of columns the grid supports and the size of those columns can be easily manipulated using the column size modifier .col-#-#. The first number indicates the amount of columns the column should span and the second number indicates the total number of columns within the grid.
In this example, the column in the first row has the column size modifier .col-2-6 meaning it occupies the width of 2 columns in a 6 column grid.
Column and grid sizes can also be specified at specific breakpoints by adding an xs-, sm-, md-, lg-, or xl- breakpoint before the column size modifier. Columns must be defined at each break point, otherwise breakpoints that have not been assigned a specific column size will default to the next specified column size.
In this example, the column has a .md-col-6-12 column size modifier meaning it occupies the width of 6 columns in a 12 column grid at the small desktop breakpoint.
The position of a column within a grid can be manipulated by adding the offset modifier .col-off-#-#to your column. The first number indicates the amount of columns you want to offset your content by and the second number indicates the total number of columns within the grid.
In this example, the column in the first row has a .col-off-3-12 column offset modifier in addition to a .col-off-3-12 size modifier meaning it occupies the width of 1 column in a 2 column grid but is offset from the left the width of 1 column in a 4 column grid.
Offset positioning can also be defined at specific breakpoints by adding an xs, sm-, md-, lg-, or xl- breakpoint before the column offset modifier. In this example, the column has a .xs-col-off-6-11 column offset modifier meaning it is offset from the left the width of 6 columns in an 11 column grid at the extra small breakpoint.
By default columns are given margin space to the left and right, known as “gutter space”, to prevent them from overlapping each other. Add the .is-gutterless modifier to a column’s parent container to set the margins of all columns in that container to 0px.