Layouts/Layout Grid

The layout grid is made to separate data into both columns and rows. If there is not enough space on the current line of the same row, the item will go to the next line. To use the grid, the user must use all of the \

To define the size of that column use the `fd-col--x` modifier, where `x` can go from 1-12

You can define different column sizes for each inflection point. In this example for extra large the cells are taking 4 columns out of 12 `fd-col-xl--4`; 4 columns out of 12 in large `fd-col-lg--4`; 6 columns out of 12 in medium `fd-col-md--6`, and 12 out of 12 in small `fd-col--12`

Add an extra `fd-row` class in between inner rows when using nesting. It will add a gutter in between rows.

To add an offset to the left of the column for all sizes use the `--offset-x` modifier. X will be the size of your choice. If the column after the offset col no longer fits in parent container it will switch to the next line. To add an offset to the left of the column for certain sizes and above use the `--offset-x--size` modifier, where size is either s,m,l,xl. To make the offset after and not before use the `--offset-after-x--size` modifier.

To remove gutters between columns apply the `fd-container--no-horizontal-gap` modifier to the container.

To remove gutters between rows apply the `fd-container--no-vertical-gap` modifier to the container.

To remove gutters between rows and columns apply both the `fd-container--no-vertical-gap` and `fd-container--no-horizontal-gap` modifiers to the container.

To make the column auto adjust and occupy the remaining space of the row use the `--full` modifier. There is a minimum width of 1/12 columns