# mjml-column

> mjml-column

Latest version **5.4.1** (published 2026-09-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install mjml-column
pnpm add mjml-column
yarn add mjml-column
bun add mjml-column
```

## Health

**Score 60/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score; popular repo.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 5.4.1 |
| Published | 2026-09-10 |
| First published | 2016-03-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 26.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18235 |
| Maintainers | mjmlio, iryusa, loeck, ngarnier, meriadec, kmcb, totocap |

## Links

- npm: https://www.npmjs.com/package/mjml-column
- Repository: https://github.com/mjmlio/mjml
- Homepage: https://mjml.io
- Issues: https://github.com/mjmlio/mjml/issues
- npm.io page: https://npm.io/package/mjml-column

## Dependencies (3)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [mjml-core](https://npm.io/package/mjml-core.md) 5.4.1
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.28.4

## Recent versions

- 5.4.1 (latest) — 2026-09-10
- 5.2.0-beta.1 (beta) — 2026-05-06
- 5.0.0-alpha.11 (experimental) — 2026-02-10
- 4.7.0-beta.2 (next) — 2020-08-28
- 5.4.0 — 2026-06-29
- 5.3.0 — 2026-05-27
- 5.2.2 — 2026-05-19
- 5.2.1 — 2026-05-12
- 5.2.0 — 2026-05-07
- 5.1.0 — 2026-04-24
- 5.1.0-beta.1 — 2026-04-24
- 5.0.1 — 2026-04-16
- 5.1.0-alpha.1 — 2026-04-16
- 5.0.0 — 2026-04-16
- 5.0.0-beta.2 — 2026-03-19
- … 142 more at https://npm.io/package/mjml-column/versions

## README

### mj-column

Columns enable you to organize the content of your sections into distinct columns which stack when viewed on a mobile device.

They must be located within `mj-section` tags in order to be considered by the engine.

<div class="alert alert-caution" role="alert">
  <p>Caution</p>
  <p>The sum of columns in a section cannot be greater than
      the width of the parent <code>mj-section</code> (or 100%).</p>
</div>

Every single column has to contain something because they are responsive containers, and will be vertically stacked on a mobile view. Any standard component, or component that you have defined and registered, can be placed within a column – except `mj-column` or `mj-section` elements.

```xml
<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <!-- Your first column -->
      </mj-column>
      <mj-column>
        <!-- Your second column -->
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
```

<div class="alert alert-caution" role="alert">
  <p>Caution</p>
  <p>Columns are used as a container for your content and should not be used to offset. Any MJML component included in a column will have a width equivalent to 100% of this column's width.</p>
</div>

<div class="alert alert-caution" role="alert">
  <p>Caution</p>
  <p>Neither the <code>mj-column</code> or <code>mj-section</code> tags can be nested in an <code>mj-column</code> tag</p>
</div>

#### Attributes

| attribute              | accepts                 | description                                                                              | default attributes                             |
| ---------------------- | ----------------------- | ---------------------------------------------------------------------------------------- | ---------------------------------------------- |
| background-color       | CSS color formats       | background color for a column                                                            |                                                |
| border                 | string                  | CSS border format                                                                        |                                                |
| border-bottom          | string                  | CSS border format                                                                        |                                                |
| border-left            | string                  | CSS border format                                                                        |                                                |
| border-radius          | string                  | border radius                                                                            |                                                |
| border-right           | string                  | CSS border format                                                                        |                                                |
| border-top             | string                  | CSS border format                                                                        |                                                |
| css-class              | string                  | class name, added to the root HTML element created                                       |                                                |
| direction              | `ltr` `rtl`             | set the display order of direct children                                                 | `ltr`                                          |
| inner-background-color | CSS color formats       | inner background color for column; requires a padding                                    |                                                |
| inner-border           | string                  | CSS border; requires a padding format                                                    |                                                |
| inner-border-bottom    | string                  | CSS border format; requires a padding                                                    |                                                |
| inner-border-left      | string                  | CSS border format; requires a padding                                                    |                                                |
| inner-border-radius    | string                  | border radius ; requires a padding                                                       |                                                |
| inner-border-right     | string                  | CSS border format; requires a padding                                                    |                                                |
| inner-border-top       | string                  | CSS border format; requires a padding                                                    |                                                |
| padding                | `px` `%`                | column padding, supports up to 4 parameters                                              |                                                |
| padding-bottom         | `px` `%`                | column bottom padding                                                                    |                                                |
| padding-left           | `px` `%`                | column left padding                                                                      |                                                |
| padding-right          | `px` `%`                | column right padding                                                                     |                                                |
| padding-top            | `px` `%`                | column top padding                                                                       |                                                |
| width                  | `px` `%`                | column width                                                                             | (100 / number of non-raw elements in section)% |
| vertical-align         | `top` `middle` `bottom` | vertical alignment.<br>Note: `middle` only applies when all `mj-column` instances use it | `top`                                          |

<p class="cta-container"><a class="cta" href="https://mjml.io/try-it-live/components/column">Try it live</a></p>

---
_Source: https://npm.io/package/mjml-column · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._