Using CSS Grid for the Latest Litmus Newsletter Layout
We like to experiment with new design and coding techniques in our newsletter, and this month we tried something new. We used CSS Grid for a masonry layout of the email (where supported) - you can see it here in Builder.
What is CSS Grid?
CSS Grid is the next wave of CSS layouts and the future of how we will implement designs. I highly recommend checking out Rachel Andrews' Grid by Example for learning all about it. There are many other great resources you can search for online, as well.
Here is the support chart for CSS Grid in web browsers. For email clients, CSS Grid is supported in:
- Apple Mail 10.3
- Outlook 2016 for Mac
- AOL Mail (In the latest version of Firefox or Chrome)
- Freenet.de (In the latest version of Firefox or Chrome)
Alto Mail also has support for CSS Grid, but for the newsletter we fell back to the mobile design for this app.
Our Apple Mail audience at Litmus is approximately 30%, so a good portion of our subscriber base is able to see the grid desktop layout.
Here is what the email looked like where CSS Grid is supported, for device/window widths greater than 850px:
Where CSS Grid isn't supported (and for device/window widths of less than 850 pixels), we fell back to a one-column layout.
We've been slowly moving away from using tables for our layouts in our newsletters, and using divs with conditional tables only for Outlook. This is a very future-forward approach. As soon as tables are no longer needed for HTML email, we can simply remove the conditional tables and won't need to change the underlying HTML structure. It also enables us to use progressively enhanced layouts such as CSS Grid much more seamlessly. We are not bound by tables for our layout structure, instead only using them as a fallback for Outlook.
We also displayed a banner at the top of the email telling users to view online for non-grid supported clients and leading to this post for all clients to learn more.
What are your thoughts?
Do you plan on trying CSS Grid for your future email layouts? Do you have any questions for us?