CSS Grid, Front-end development, front-end development tips and tricks

Why CSS Grid Should Be In Your Front-End Development Toolbox

I recently had the privilege of taking Wes Bos’ free course on CSS Grid (thanks, Mozilla!). If you’re a front-end developer, this is a must take course. At first, I was a little skeptical about CSS Grid given how much I love Flexbox. Additionally, I wasn’t seeing support for Android’s default browser when I’d checked it before, but according to caniuse.com at the time of this post, Grid has 86.59% browser support and Android is now golden.

While CSS Grid is not as supported as Flexbox, it pretty much has similiar support for the vast majority of our target audience. Opera Mini is the main browser that has no support for Grid. According to Rad Devon, most Opera Mini users are in Africa for users with incredibly low data plans (think 10 MB per month). So it feels pretty safe to me, when it comes to the clients we’re working with, to view CSS Grid as a viable option.

I primarily work in the WordPress realm, so I’m constantly dealing with themes and child themes. I was especially encouraged by Wes’ full bleed episode which feels very applicable to doing some really neat layouts especially with dynamic content that a user is populating on their pages or posts. Full Bleed layouts in the past were either a nightmare to make with all sorts of wrappers, or very hacky with negative margin. With CSS Grid we can quickly and easily allow for full content while having the majority of the layout support the optimal text length.

Continue Reading