# Grid system
Build page layouts with components based on flexbox and 12-column grid system
Grid system is similar in its implementation to Bootstrap’s layout and grid components. It consists of the three
separate components, <bdn-container>, <bdn-row> and <bdn-col>, which you can use to create almost all necessary
layouts. Of course, depending on the design, this kind of grid may prove to be unsuited for all purposes in which case
you need to create containers with HTML and CSS.
When creating your own grids, feel free to use flexbox, as it’s 2020, and it has support in all major browsers.
Be aware of the limitations and bugs around flexbox (opens new window), like the inability to use some HTML elements as flex containers (opens new window).
# How it works
Badin Library grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox (opens new window) and is fully responsive. Below is an example, and an in-depth look at how the grid comes together.
In demonstration below we are using the container, row and column components to build a layout with 3 equal-width columns.
The above example creates three equal-width columns on all device resolutions using predefined grid classes.
# General rules
The aforementioned components will work properly if you follow these rules:
- Containers should be a root element when creating a layout with grid components. They provide a way to horizontally
center and pad the content. Using only
<bdn-container>without props will set the container maximum width based on the display resolution, but if you add prop fluid it will be of 100% width across all viewports. - Inside
<bdn-container>component you should add rows, which are wrappers for columns - The immediate children of rows should only be
<bdn-col>components If you’re using props for sizing columns, they should add up to 12, just like in Bootstrap grid - Your content should only be placed inside columns
# Column sizing
You can use a set of predefined props to size the columns and your content.
The column sizing uses the mobile-first approach and there are 4 predefined breakpoints, you can find the reference below:
| size | description |
|---|---|
| sm | above 576px |
| md | above 768px |
| lg | above 1024px |
| xl | above 1200px |
See the example below to get the proper picture of how to use props to size the columns
# Alignment
Rows can horizontally and vertically align columns inside them using the align-h and align-v props.
# Vertical alignment
There are several options that work out-of-box for vertically aligning the rows. As the grid is flex based, the prop
values are taken from the flex CSS properties and so prop align-v can take the following values: start, center
, end,
baseline and stretch.
The default alignment of row component is stretch, so you can leave the align-v prop out if you want your columns to
stretch to the height of the row.
For individual grid cell vertical alignment, use the align-self prop on <bdn-col>. Possible values are start, center, end, baseline, and stretch:
Below are the examples of different align options, and code for them.
# Horizontal alignment
When you have columns that don’t take up the whole width of the row, you can align them horizontally. This is done via
the prop align-h placed on the row component and possible values are start, center, end, around and between.
The default value is start.
See the example below:
# Column reordering
# Reordering in DOM
Use props order-*="x" where x is a number from 1 to 12, to reorder the position of columns in view. Reordering is
fully responsive, so you can use breakpoints based props to order columns whatever you like. For example, you can
use order=" 3" to move reorder column and also order-md="3" to reorder it only on md display sizes.
When there are no order props present, the order will default to 0.
See the example below:
# Offseting columns
Similar to order props, you can use offset prop to offset the grid columns. Use offset="x" or responsive variations
offset-sm="x", offset-md="x" etc, where x is a number between 1 and 12, to offset your columns from left to right.
You can reset the offset by setting the offset prop to 0, for example, to reset the offset on lg breakpoint, use
offset-lg="0" on column.
See the example below:
# Props reference
# Container <bdn-container>
| Property | Type | Default | Accepts | Description |
|---|---|---|---|---|
fluid | Boolean | false | true or false | If true, sets the width of container element to 100% width. If false, it will have the width set for each breakpoint. |
h-align | String | center | left center right | Sets the horizontal alignment of the container element. By default, the container will be centered on page, but you can use properties such as left and right to align it differently. |
# Row <bdn-row>
| Property | Type | Default | Accepts | Description |
|---|---|---|---|---|
no-gutters | Boolean | false | true or false | If present, removes the gutters between columns |
align-v | String | null | start center end baseline stretch | Aligns the columns inside the row vertically |
align-h | String | null | start center end around between | Aligns the columns inside the row horizontally. This will work only if the columns inside do not take the full width of row. |
align-content | String | null | start center end around between stretch | Align columns items together on the cross axis. Has no effect on single rows of items |
# Column <bdn-col>
| Property | Type | Default | Accepts | Description |
|---|---|---|---|---|
col | Boolean | false | true or false | If true, makes the column fill the available width in row |
cols | String or Number | null | 1-12 | Number of columns the grid cell spans inside the row |
sm | String or Number | null | 1-12 | Number of columns the grid cell spans inside the row for sm breakpoint |
md | String or Number | null | 1-12 | Number of columns the grid cell spans inside the row for md breakpoint |
lg | String or Number | null | 1-12 | Number of columns the grid cell spans inside the row for lg breakpoint |
xl | String or Number | null | 1-12 | Number of columns the grid cell spans inside the row for lg breakpoint |
offset | String or Number | null | 1-12 | Number of columns the grid cell is offset for xs and up breakpoints |
offset-sm | String or Number | null | 1-12 | Number of columns the grid cell is offset for sm and up breakpoints |
offset-md | String or Number | null | 1-12 | Number of columns the grid cell is offset for md and up breakpoints |
offset-lg | String or Number | null | 1-12 | Number of columns the grid cell is offset for lg and up breakpoints |
offset-xl | String or Number | null | 1-12 | Number of columns the grid cell is offset for xl and up breakpoints |
order | String or Number | null | 1-12 | Flex order of the grid cell for xs and up breakpoints |
order-sm | String or Number | null | 1-12 | Flex order of the grid cell for sm and up breakpoints |
order-md | String or Number | null | 1-12 | Flex order of the grid cell for md and up breakpoints |
order-lg | String or Number | null | 1-12 | Flex order of the grid cell for lg and up breakpoints |
order-xl | String or Number | null | 1-12 | Flex order of the grid cell for xl and up breakpoints |