Down to Basics - Replacing Frameworks with CSS Grid

Submitted by Marc on Sun, 03/04/2018 - 15:24
Outdoor classroom as a framework for great education

Like many web developers, I've been using CSS frameworks for years - Bootstrap and Foundation being the main ones. Of course using these has been incredibly helpful when it came to layout and not having to worry about mobile responsiveness, layout percentages, mobile menu's built in, and some other extras like accordions and such. While I love these frameworks, I kept hearing about CSS Gris as a replacement and now that browser support has gotten really good, I thought why not give it a try?

To start, I watched this fantastic talk Miriam Suzanne gave at DjangoCon - she details the history of CSS layout in general and frameworks like Bootstrap and others. At the end of the talk, she sums up with "throw all of that away because CSS Grid is amazing". I then dove into training with one of my favorite online trainers, Wes Bos, who's CSS Grid course is laid out well (pun intended), clear, and easy to follow. Finally, I have CSS Tricks grid overview page up practically at all times I'm coding.

Then, it was time to dive right in! My current project has a collage-themed home page which just screamed CSS grid and it was a great introduction to how grid would work in the real world. In general, I found that setting up the grid was far easier than I had thought it would be. I wasn't using more than about 4 columns, in general, for the overall layouts. I even was able to use this trick to have a centered max-width content with a full-bleed image and it worked beautifully. And when it came time to create the mobile responsive parts, I was surprised how easy it was to simply reduce the grid down using media queries and/or extending the grid parts across multiple columns.

Early on, I think I got overly excited about using it, and like the adage "when you have a hammer, everything looks like a nail" I was putting grid everywhere! Of course, this meant that I overthought some of the pieces of the site and after a few days of working with it in the real world, I actually ended up stripping most of the unnecessary grid out in favor of more standard "top-to-bottom" block layouts. I still used grid in some really neat ways for the collage and footer. The footer on this site, for example, uses a 25%, 25%, 50% area with the menu on the right on desktop. But on mobile it switches so the menu is on top and 100% width. So, essentially, this is all the code I needed for the footer:

See the Pen GQaWYP by Marc Berger (@CodeChefMarc) on CodePen.

Finally, it came time to open the darned thing in IE11. I hear the collective sigh. While the site looked like crap initially, it was actually easier than I thought to add grid to work with IE 11. Turns out, to my surprise, IE actually had an early implementation of grid. While it's different syntax than the current standard, it's not so different that adding some additional conditional IE CSS wasn't out of the question. This blog post by Rachel Andrew REALLY helped me add the code I needed to make IE work pretty well.

Update: So, turns out IE doesn't support grid autolayout. 🤦‍♀️ So I get all of the grid items stacking on top of each other. Wat. So, I put the IE changes on hold for the moment and will go back to them later. I think what I'll do for IE is basically create a simplified "Bootstrap" layout with floats and percentages so it at least looks okay... Lame. I suppose I could use flexbox as I think IE supports that... More in a different post later.