Bootstrap to CSS Grid

“There’s no way I can start using CSS Grid yet”

You’re ready to declare display: grid if you’re the only person contributing code. However, if you’re working with a bigger team, on an older project, or are faced with some real-world constraints, you should anticipate a few extra steps ahead of you.

Everyone’s situation is different, but I’ll venture a guess that some of these might ring true if you find yourself hesitating:

  • Your designers have heard “No, you can’t do that, that’s not how layout on the web works” too many times. They’re not designing anything that calls for you to learn CSS Grid.
  • Your developers have heard “You can’t use that yet, we still have to support [browser]” too many times. They don’t dare to dream that all of the excitement about CSS Grid can apply to them quite yet — adding CSS grid is out of scope.
  • You’re on a tight deadline and you’re still not over how long it took you to really wrap your head around Flexbox. You promise yourself that you’ll take the time learn CSS Grid next time… for the next project… someday.

If so, then start small with Progressive Enhancement. Use feature queries to enhance your components with CSS Grid, and worry about deleting old code later. Use the time to show the potential of CSS Grid to your designers. Learn without worrying. You might have to override some styles, but the gains will outweigh the temporary extra code.

Gridlock

“That sounds nice, but I can’t use CSS Grid, we’re still on Bootstrap!”

Don’t let that stop you from progressively enhancing your app with the new and exciting features of CSS!

CSS is a powerful tool and remarkably flexible. I made an example on Codepen that embraces CSS grid without removing the Bootstrap code or functionality for old browsers. Try it out, resize your browser, and then toggle off the CSS grid enhancement. I tried to make just about every breakpoint a little different to show the creativity made possible with CSS grid. Fork it, play around, and make something new. It’s just an example, and I hope you have fun with it.

Codepen Example

“Why didn’t you just use Bootstrap? There’s hardly any difference!”

Yeah, yeah. Listen, I get that I could have just used Bootstrap and called it a day, it works just fine, and it’s incredibly fast to throw together once it’s already on a project. That’s why it’s still the fallback. But, once you get a glimpse of the future, it’s hard to stay in the past. I have seen the power and potential of CSS Grid and I wanted to start using it. Or, more specifically:

  • I didn’t want to declare a height to accommodate the maximum content. I would much rather have each row to know how tall each item should be.
  • I wanted to have the option of being able to vary the widths of each item, I don’t want to have them split evenly or predictably all of the time.
  • I was bored by having to always think in terms of 12 columns. It’s why the internet all looks the same.
  • I felt trapped by the fixed breakpoints for the columns. I wanted to set my own breakpoints to best serve my content. It’s great to easily be able to tweak the breakpoints at which the content changes from 2up to 3up or have the freedom to do something entirely different.
  • I didn’t want to keep making the choice between affecting global layout rules and writing hacky overrides.
  • I wanted to easily change the gap between my columns. Sometimes a 3px column gap is all you need.
  • I wanted to be able to set a min and max for each item and let the browser to figure out how many to fit in each row. I am a huge fan of letting the browser do the math.
  • It takes about 3 lines of CSS to write the grid layout I want, and I wanted to live in the bright and beautiful future where layout is always that simple.
  • Most importantly, I wanted to be excited about layout on the web again, and I wanted the designers I work with to feel the same.

“Won’t I just be writing throwaway code?”

CSS grid isn’t a hack, it’s a proper layout tool for the web. You don’t need to install anything, you don’t need a preprocessor, and you don’t need to twist your brain into knots just to understand how it works.

Enhancing to CSS grid is not writing throwaway code — the throwaway code will be the old code you’ll want to delete when it makes sense. It’ll be much sooner than you think. Chrome, Firefox, and Safari all support CSS grid, and Edge has just shipped CSS grid behind a flag.

Just keep your code organized and blaze that trail.

“Ok, I’m convinced! Where do I go next?”

There are so many great resources out there! Personally, I recommend checking out the following:

Online Resources: Amazing work done by Jen Simmons (labs.jensimmons.com) and Rachel Andrew (rachelandrew.co.uk).

In Person: If you’re a fan of conferences like I am, how about going to CSS Dev Conf — it’s awesome, and as a bonus, it’s in New Orleans this year. Attend Brenda Storer’s talk on CSS Grid.

Codepen: How about this CSS Grid Codepen collection by Stacy Kvernmo?

DIY: Download Firefox and start using their handy grid inspection tool — it looks like a little waffle icon right next to display:grid in the inspector. Trust me, being able to visualize the changes you’re making is key. Visit some websites that are already using CSS grid in production, inspect, and play around in the browser dev tools.

The “waffle” icon in Firefox.

“Great! I’ve got my resources, I’ve downloaded Firefox, and I’m ready to display: grid… but there is no place in my company’s project where I can try this out for real.”

You are ready to be the pioneer who brings CSS grid to your team, but you’re not sure where to start? There are a couple of good places to look. First, do you have anything that’s only used internally? For example, I think one of the *best* places to start is with your style guide. (If you don’t have one, get one, and start documenting your design patterns!!!) To start, you can layout your blocks of brand colors with CSS Grid.

Layout your color swatches in your style guide using CSS Grid.

Alternatively, you can take this progressive enhancement approach on just one component at a time. Again, use feature queries to wrap your grid declarations and you’ll be able to start using CSS grid without having to make sweeping changes to your site quite yet.

Start small, start simple, and build it up slowly! I promise it’s worth it.

Finally, I hope you’ll share your work! It’s an exciting time for layout on the web. Get creative and make something new.