Like a regular HTML template, we can split this one into different parts to fit in a grid.
The body of your email, represented by the `mj-body` tag contains the entire content of your document:
From here, you can first define your sections:
Inside any section, there should be columns (even if you need only one column). Columns are what makes MJML responsive.
Below, you'll find some basic rules of MJML to keep in mind for later. We'll remind them when useful but better start learning them early on.
## Column sizing
### Auto sizing
The default behavior of the MJML translation engine is to divide the section space (600px by default, but it can be changed with the `width` attribute on `mj-body`) in as many columns as you declare.
Let's take the following layout to illustrate this:
```html
```
Since the first section defines only 2 columns, the engine will translate that in a layout where each column takes 50% of the total space (300px each). If we add a third one, it goes down to 33%, and with a fourth one to 25%.
### Manual sizing
You can also manually set the size of your columns, in pixels or percentage, by using the `width` attribute on `mj-column`.
Let's take the following layout to illustrate this:
```html
```
## Nesting
```html
```
