was pretty proud of myself that I managed to make the custom grid I wanted for a client but then I was told it needs to work for email too. tried looking at different alternatives for display: grid on the web but couldn't find any.
does such an alternative exist? and suggestions if not?
for reference here is the grid I made:
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {
display: grid;
grid-template-columns: repeat(20, 1fr);
gap: 10px;
grid-auto-rows: minmax(30px, auto);
}
.one {
grid-column: 1 / 16;
grid-row: 1 / 9;
background-color: black;
}
.two {
grid-column: 16 / 21;
grid-row: 1 / 9;
background-color: red;
}
.three {
grid-column: 1/7;
grid-row: 9 / 12;
background-color: green;
}
.four {
grid-column: 15/21;
grid-row: 9/12;
background-color: blue;
}
.five {
grid-column: 1/11;
grid-row: 12/17;
background-color: yellow;
}
.six {
grid-column: 11/21;
grid-row: 12/17;
background-color: purple;
}
.seven {
grid-column: 7/15;
grid-row: 9/12;
background-color: gray;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
<div class="seven">text</div>
</div>
</body>
</html>The support for CSS or Head-Style is quite poor for E-Mails with ~45%
citatation: CSS support
So overall you should relay on inline-style when designing an email-template.
Neither CSS-Grid (~59% supported) nor Flexbox (~59% supported) have a reasonable support from email clients.
citatation: CSS-Grid support
citatation: Flexbox support
The only thing you can do is to use a <table> which has a solid 100% support as it is a HTML solution. It is not tabular data but for email-templates acceptable as it is the only method that is fully supported!
citatation: table support
Email-Template:
As said above, we have to use a table. The equivalent to the grid-gap would be the combination of border-collapse: seperate; + border-spacing: value; directly used on the table itself: <table style="border-collapse: seperate; border-spacing: 10px;">
To emulate your grid-template-columns: repeat(20, 1fr); I started with an empty <tr> that has 20x <td width="5%">
this now allows us to use the colspan-attribute to span multiple columns just like grid-column: spanX
to emulate the min-height you just have to apply the height-attribute which is the same as min-height for tables as a tablecell will resize if the content is larger. I simply tooked your 30px times the rows you wanted to span.
To have the text start in the top left corner instead of the center of the table cell you have to apply: text-align:left; vertical-align:top; to every single <td>.
<table width="100%;" style="border-collapse: seperate; border-spacing: 10px;">
<tr>
<td width="5%;"></td>
<td width="5%;"></td>
<td width="5%;"></td>
<td width="5%;"></td>
<td width="5%;"></td>
<td width="5%;"></td>
<td width="5%;"></td>
<td width="5%;"></td>
<td width="5%;"></td>
<td width="5%;"></td>
<td width="5%;"></td>
<td width="5%;"></td>
<td width="5%;"></td>
<td width="5%;"></td>
<td width="5%;"></td>
<td width="5%;"></td>
<td width="5%;"></td>
<td width="5%;"></td>
<td width="5%;"></td>
<td width="5%;"></td>
</tr>
<tr height="240px">
<td colspan="15" style="background-color:black; color:white; text-align:left; vertical-align:top;">one</td>
<td colspan="5" style="background-color:red; text-align:left; vertical-align:top;">two</td>
</tr>
<tr height="90px">
<td colspan="6" style="background-color:green; text-align:left; vertical-align:top;">three</td>
<td colspan="8" style="background-color:gray; text-align:left; vertical-align:top;">text</td>
<td colspan="6" style="background-color:blue; text-align:left; vertical-align:top;">four</td>
</tr>
<tr height="150px">
<td colspan="10" style="background-color:yellow; text-align:left; vertical-align:top;">five</td>
<td colspan="10" style="background-color:purple; text-align:left; vertical-align:top;">six</td>
</tr>
</table>