# Layout

## Containers

In Magic, element layout works quite similarly to most other libraries. At the top of most pages, you'll find a navigation bar (typically shortened to navbar).

Below that is a container, which makes sure elements appear neatly on the page. Elements should always be placed inside containers (unless noted otherwise). For example, the following text is placed incorrectly - outside of a container:

I don't look right!

To learn more about containers, see the container page.

## Grid

Magic also allows you to create grid layouts within containers, using CSS Flexbox. Grids contain columns and rows, to arrange elements - they're a key component of most websites. We've made it very simple, and setting up a grid is just a matter of easy markup. For example, the following layout uses a grid to make two side-by-side sections, which pile on mobile:

# Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis sodales sem. Sed in lectus sem. Integer eu elit sit amet libero ornare faucibus. Maecenas eget molestie purus. Aenean consequat rutrum quam eget rhoncus. Proin diam lorem, mollis vel orci ac, rhoncus sodales ipsum.

# Column 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis sodales sem. Sed in lectus sem. Integer eu elit sit amet libero ornare faucibus. Maecenas eget molestie purus. Aenean consequat rutrum quam eget rhoncus. Proin diam lorem, mollis vel orci ac, rhoncus sodales ipsum.

To learn more about grids, see the grid page.