Sorry! Internet Explorer is not supported on this site. Please view on Chrome, Firefox, or Edge.

Having fun at Zao is one of our values. We’ve put limited animated flourishes throughout our site to communicate our love of levity. We also recognize that onscreen movement is not fun or possible for everyone. We've turned off all our animations for you per your browser's request to limit motion. That said, we don't want you to miss out on the party.

Here's a funny joke to enjoy!

What do you get when you cross a dyslexic, an insomniac, and an agnostic?

Someone who lays awake at night wondering if there is a dog.

Code Snippets, Development, Education, Tools & WorkFlow

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

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

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.

Wes generously gave me permission to put all his code for the full bleed episode into a codepen to show you a little more hands on what we covered in that episode. [Note: the pen in this post will appear as a mobile size. Open the pen in a new tab on a desktop to get the full effect of what I’m describing]

See the Pen Wes Bos – Full Bleed CSS Grid by Liz (@lizkaraffa) on CodePen.dark

I’m seriously blown away how easy it would be to target any full width images a user added to a post or page and make the image be full bleed. The same thing can be applied to blockquotes. I also love that on mobile you can still maintain a little bit of the bleed effect while not sacrificing precious real estate (Click the CSS tab in the pen to see a mobile portrait view).

CSS Grid and Flexbox also play nicely together, which means you don’t have to abandon Flexbox if you love it.

I was also super happy to discover another trick of CSS Grid: how well CSS Grid can handle overlays. I pretty much avoid absolute positioning like the plague, but often times in an overlay situation, you need it. Well not anymore! CSS Grid allows you to effortlessly work with overlays. Below, I’ve whipped up a few examples of different overlays using CSS Grid in codepen.

See the Pen Various Overlays with CSS Grid by Liz (@lizkaraffa) on CodePen.dark

As you can see, overlays that need a specific shape and position are not a problem for CSS Grid. Additionally, you’re not constrained to have your overlay be the exact height and width of its parent.

I’m really excited for the future of front end development with CSS Grid as an asset in our toolbox. There are many other great things about CSS Grid, especially how easy it is to be responsive out of the box with minimal (and in some cases, no) media queries.

Be sure to take Wes’ course to dive into all the great things CSS Grid has to offer.

What are some of your favorite finds about CSS Grid?