The grid is composed of 3 components: container (lk-container), row (lk-row) and column (lk-column). They provide a way to structure and layout items on the page.
The container component (lk-container) is used to center and/or horizontally pad content. By default it has a maximum width of 1280px, falling back to 100% of the browser window when it is below that size.
The prop fluid can be used to have the container always be 100% of the browser window (or the width of the parent element).
The grid is composed of rows and columns (the lk-row and lk-column components) where there can be up to 12 columns in a row. If a row has more than 12 columns, the columns will overflow onto a new line.
By default all columns in a row will be of equal width:
The width of a column can be specified using the span prop, where the value is the number of columns that you want the column to span. Columns without a span defined will take up an equal share of the remaining space:
Setting the span to auto will make the column fit it's contents:
If a column has a specific width set at a small screen size (for example it's set at 12 at the sm breakpoint) but we want the column to fill the remaining space at a larger screen sizes we can set the span prop to fill.
sm, otherwise fills the remaining spaceThe span prop accepts values from 1 to 12, auto and fill.
The offset prop can be used on the column component offset the column from the left hand side.
This prop exists so that we can have control over columns spacing without having to use empty columns.
The size of the gutter between columns can be set on per row basis by using the gutter prop.
The gutter prop accepts the following arguments:
spacing-horizontal().content will set a gutter size of spacing-horizontal(content).compact will set a gutter size of spacing-horizontal(compact).mini will set a gutter size of spacing-horizontal(mini).none will make the columns have no gutter.It is possible to re-order columns at different breakpoints using values from 1 to 12. first and last can also be used as values to set the column to be placed first or last in the row.
order value of 3 will be placed before a column with an order value of 4.order value will be ordered in the same order as they appear in the markup.The span, offset, gutter and order props can be prefixed with the following prefixes to provide responsive functionality:
sm: will apply when the browser window is >= 576px wide.md: will apply when the browser window is >= 768px wide.lg: will apply when the browser window is >= 992px wide.xl: will apply when the browser window is >= 1200px wide.The following row columns will have a standard gutter when the window is >= 992px wide, a compact gutter when the window is >= 768px, a mini gutter when the window is >= 576px and no gutter below that.
The align-items-{start|center|end} props can be used on the row component to vertically align all columns in the row:
The justify-content-{start|end|center|between|around|evenly} props can be used on the row component to horizontally align all columns in the row:
The align-self-{start|center|end} props can be used on the column component to vertically the column in a row: