``` element. The grids must be optimally placed in the [Container component](container.md). ```html

``` See the [Column component](column.md) for learn more about columns. ----------- ## Spacing By default, the grid add a spacing between columns. For turn off spacing, add the ```.grid-spacing-off``` class to a ```.grid``` element. You can also set two other spacing sizes with the following classes: | Class | Description | | ------ | ------- | | ```.grid-spacing-medium``` | Adds a medium spacing between columns. | | ```.grid-spacing-large``` | Adds a large spacing between columns. |

Spacing off

Spacing medium

Spacing large

```html

``` ----------- ## Alignment By default, the columns are aligned at the center of the grid. You can align columns at the top and bottom of the grid with the following classes: | Class | Description | | ------ | ------- | | ```.grid-align-top``` | Align columns at the top. | | ```.grid-align-center``` | Align columns at the center. | | ```.grid-align-bottom``` | Align columns at the bottom. |

Align Top

Align Center

Align Bottom

```html

``` -----------