Gutter between columns / body

[EmmanuelBeziat]

Hi there,

I do need to have columns separated by some spaces. At this point I don't know how to achieve this…

Thanks for any help.

[iRyusa]

Hello @EmmanuelBeziat

Column doesn't support padding, you can just add the same padding on every element inside your column like this:

<mj-column>
  <mj-text padding="0 20px">...</mj-text>
  <mj-anything padding="0 20px">...</mj-anything>
</mj-column>
<mj-column>
  <mj-text padding="0 20px">...</mj-text>
  <mj-anything padding="0 20px">...</mj-anything>
</mj-column>

[EmmanuelBeziat]

Hello,

Nope, this won't work for what I need here — really spaces between columns, not inside. Here's a scheme :

So at this point, each column contains two <mj-text>and one <mj-image />. Each <mj-text> have some padding on them already, and they only work "inside". In this case, i'm stucked because I have a need to have 3 columns with a visible gap between them. Needless to say, those columns must be responsive.

I was only able to achieve this by… Not using MJML for all this portion of the mail. This scheme is used 2 times in it, so basically using MJML was almost pointless for this project, I ended up with something like this :

<mj-body>
  <mj-section>
    <mj-column>
      <mj-raw>
        <!-- some nasty, old, heavy, handwrited html -->
      </mj-raw>
    </mj-column>
  </mj-section>
    <mj-column>
      <mj-raw>
        <!-- some nasty, old, heavy, handwrited html -->
      </mj-raw>
    </mj-column>
  </mj-section>
</mj-body>

Moreover, it forced me to add some classes and CSS to handle responsiveness of this handwrited html, so each time I compiled using MJML, I was forced to add some CSS in the output version, because I couldn't do it inside the MJML template.

I had a dozen of mailing to do since the beginning of 2016, and most of them had some "plain-color" columns like this that need a gutter. This is why I think this would be really, really important to improve this system of columns, allowing some gap (maybe with an attribute ?) that would add some blank cells between actual ones.

Thanks for your help anyway :)

[MikeMuxika]

Hey @EmmanuelBeziat, a temporary solution could be adding an empty column set to the specific width you need in between but this will probably result in strangely sized columns if you leave them at the default 100% width.
<mj-column background-color="#FFFFFF" width="Xpx"></mj-column

[pixelize]

+1 @EmmanuelBeziat I totally agree with you, would be awesome if we can put gutters between cols to space them out.

For now I use a dirty trick which is working fine:

<mj-column background-color="#FFFFFF" width="20%"> <mj-raw> &nbsp; </mj-raw> </mj-column>

[iRyusa]

Related to #204

[iRyusa]

Just a quick update on the issue here, we have found a solution for it, but it will require some refactor on how mj-image behave.

So we add a table/tbody/tr/td that will wrap the mj-column and add padding on td.

As of today mj-image just take the size of a column, and with gutter support, an image should take column size - padding left+right - gutter left/right.

But we need to solve the issue with mj-image's width first cf #263

[iRyusa]

Brace yourselves, gutter are coming in MJML4 !

[xjrcode]

On 3.X you can make a border of the same color as the background and add some width.

For example if you have an mj-sectionwith white background you can do this:

<mj-column border="10px solid #fff">...</mj-column>

[ngarnier]

Gutters are available in the latest beta of MJML 4, install it with npm install mjml@next.

Here is how to reproduce the layout above (you can obviously adjust paddings to get the exact same result):

<mjml>
    <mj-body>
        <mj-section background-color="#D5D5D5" background-repeat="no-repeat" text-align="center" vertical-align="top" padding="10px">
            <mj-column padding="10px" > 
                <mj-image src="https://puu.sh/z9hcM/b54d0b6d6a.png" padding="0" />
            </mj-column>
            <mj-column padding="10px"> 
                <mj-image src="https://puu.sh/z9hcM/b54d0b6d6a.png" padding="0" />
            </mj-column>
            <mj-column padding="10px"> 
                <mj-image src="https://puu.sh/z9hcM/b54d0b6d6a.png" padding="0" />
            </mj-column>
        </mj-section>
    </mj-body>
</mjml>

Which will produce this:

[EmmanuelBeziat]

@ngarnier Awesome! Thanks a lot, this will be very useful.

[nicmare]

wow was wondering how to reduce the gutter between two columns. then i found the answer of setting padding-left="0" to the child element like mj-text. why not just adding this to the docs? thanks

[iRyusa]

Docs display default attribute value already on all elements, we can't do a CSS tutorial for each property here.

[nicmare]

its not about each property. its only about gutter width. the space between two columns. only topic i found it this https://documentation.mjml.io/#column-sizing
but no words how to change gutter width or reduce it. this works for me now: #160 (comment)

[Sambuxc]

I'm running into an issue here when I'm using a border on the columns.

I have added a border to each of the columns and the padding does not work as expected. Borders should sit between the margin and padding: [margin] [border] [padding] [content]. It looks like mjml does not implement it in this way and puts the order as [margin] [padding] [border] [content].

<mjml>
    <mj-body>
        <mj-section background-color="#D5D5D5" background-repeat="no-repeat" text-align="center" vertical-align="top" padding="10px">
            <mj-column padding="10px" border="1px solid #05C3DE"> 
                <mj-image src="https://puu.sh/z9hcM/b54d0b6d6a.png" padding="0" />
            </mj-column>
            <mj-column padding="10px" border="1px solid #05C3DE"> 
                <mj-image src="https://puu.sh/z9hcM/b54d0b6d6a.png" padding="0" />
            </mj-column>
            <mj-column padding="10px" border="1px solid #05C3DE"> 
                <mj-image src="https://puu.sh/z9hcM/b54d0b6d6a.png" padding="0" />
            </mj-column>
        </mj-section>
    </mj-body>
</mjml>

Issue created - #2693

[iRyusa]

Yep as MJML tag doesn't produce a single tag it's a bit counter intuitive as it doesn't follow the box model.

Use inner-border for this case.

[Sambuxc]

Thanks!
For reason, I had to specify padding on the column to get the border to show, even if the value was set to 0px. Without the padding, the border would not show.