Mobile first Gutenberg grids with auto-responsive columns
Published: November 29, 2019By Sebastian
I’ve been playing around with Gutenberg blocks since releasing Microthemer’s new drag and drop CSS grid controls. And I think I’ve settled on the best workflow – mobile first. Just make a single column layout in Gutenberg, and use Microthemer to add columns for larger screens using the mobile-first (min-width) media queries. As opposed to desktop-first (max-width) media queries. You can load these instead of, or alongside, the default media queries.
I know that people often find the mobile-first approach tricky to implement in practice, certainly on a site-wide level. If your theme or page builder uses max-width media queries, it can feel like you’re going against the grain. So I’m not suggesting you change the way you build sites. Just that you use min-width media queries to add columns when building CSS grid layouts with Microthemer and Gutenberg. It’s actually the simplest way to do things. And Gutenberg blocks are yours to style however you want. They don’t have preferences for mobile-first vs desktop-first.
Responsive columns without media queries
A customer recently pointed out a feature of CSS grid I wasn’t aware of. I felt slightly embarrassed as it’s an incredibly useful feature. You can create responsive columns without using media queries. More and more columns are auto-added as the space available increases. All you need to do is add the following style rule via the All Devices tab, which Microthemer provides a shortcut for:
This ‘auto-responsive’ feature of CSS grid should, and may well, get a video of its own. But for now, I’ve included it in a short video about styling Gutenberg blocks using the mobile-first approach.
Watch the video
Mobile first Gutenberg grids with auto responsive columns (7 mins)
We know that lots of you have been happily recommending Microthemer to your friends. This really helps us out. And to say thanks, we'd like to start giving you some commission for sending customers our way. Find out more.
Mobile first Gutenberg grids with auto-responsive columns
I’ve been playing around with Gutenberg blocks since releasing Microthemer’s new drag and drop CSS grid controls. And I think I’ve settled on the best workflow – mobile first. Just make a single column layout in Gutenberg, and use Microthemer to add columns for larger screens using the mobile-first (min-width) media queries. As opposed to desktop-first (max-width) media queries. You can load these instead of, or alongside, the default media queries.
I know that people often find the mobile-first approach tricky to implement in practice, certainly on a site-wide level. If your theme or page builder uses max-width media queries, it can feel like you’re going against the grain. So I’m not suggesting you change the way you build sites. Just that you use min-width media queries to add columns when building CSS grid layouts with Microthemer and Gutenberg. It’s actually the simplest way to do things. And Gutenberg blocks are yours to style however you want. They don’t have preferences for mobile-first vs desktop-first.
Responsive columns without media queries
A customer recently pointed out a feature of CSS grid I wasn’t aware of. I felt slightly embarrassed as it’s an incredibly useful feature. You can create responsive columns without using media queries. More and more columns are auto-added as the space available increases. All you need to do is add the following style rule via the All Devices tab, which Microthemer provides a shortcut for:
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
This ‘auto-responsive’ feature of CSS grid should, and may well, get a video of its own. But for now, I’ve included it in a short video about styling Gutenberg blocks using the mobile-first approach.
Watch the video
Mobile first Gutenberg grids with auto responsive columns (7 mins)Try the online demo
Launch demo
Get Microthemer
View price plans