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.

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.

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

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 | px % | 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 | px % | 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.Note: middle only applies when all mj-column instances use it | top |