# mjml-group

> mjml-group

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

## Install

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

## 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-06-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 11.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18242 |
| Maintainers | mjmlio, iryusa, loeck, ngarnier, meriadec, kmcb, totocap |

## Links

- npm: https://www.npmjs.com/package/mjml-group
- 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-group

## 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
- … 121 more at https://npm.io/package/mjml-group/versions

## README

### mj-group

Prevent adjacent `mj-column` instances from stacking on mobile by wrapping them inside an `mj-group` tag, keeping them side by side on mobile.

<figure>
  <figcaption>Desktop</figcaption>
  <img src="https://static.mailjet.com/mjml-website/documentation/group-example-1.png"
       alt="easy and quick; responsive" />
</figure>

<figure>
  <figcaption>Mobile</figcaption>
  <img src="https://static.mailjet.com/mjml-website/documentation/group-example-2.png"
      alt="easy and quick; responsive" />
</figure>

```xml
<mjml>
  <mj-body>
    <mj-section>
      <mj-group>
        <mj-column>
          <mj-image width="137px" height="185px" padding="0" src="https://static.mailjet.com/mjml-website/documentation/group-1.png" />
          <mj-text align="center">
            <h2>Easy and quick</h2>
            <p>Write less code, save time and code more efficiently with MJML’s semantic syntax.</p>
          </mj-text>
        </mj-column>
        <mj-column>
          <mj-image width="166px" height="185px" padding="0" src="https://static.mailjet.com/mjml-website/documentation/group-2.png" />
          <mj-text align="center">
            <h2>Responsive</h2>
            <p>MJML is responsive by design on most-popular email clients, even Outlook.</p>
          </mj-text>
        </mj-column>
      </mj-group>
    </mj-section>
  </mj-body>
</mjml>
```

<div class="alert alert-important" role="alert">
  <p>Important</p>
  <p>Column inside a group must have a width in percentage, not in pixel.</p>
</div>

<div class="alert alert-note" role="alert">
  <p>Note</p>
  <p>You can nest both <code>mj-column</code> and <code>mj-group</code> inside a <code>mj-section</code>.</p>
</div>


#### Attributes

| attribute        | accepts           | description                                        | default attributes                             |
| ---------------- | ----------------- | -------------------------------------------------- | ---------------------------------------------- |
| background-color | CSS color formats | background color for a group                       |                                                |
| css-class        | string            | class name, added to the root HTML element created |                                                |
| direction        | `ltr` `rtl`       | set the display order of direct children           | `ltr`                                          |
| vertical-align   | string            | CSS values, e.g. `middle` `top` `bottom`           |                                                |
| width            | `px` `%`          | group width                                        | (100 / number of non-raw elements in section)% |

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

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