Are you seeking to build a responsive grid without calculating breakpoints and having to write multiple lines of code? Well you’ve found the right blog! This is a tutorial on how to properly apply CSS Grid Layout across all browsers. There’s plenty of code examples along the way to hopefully empower you to have confidence in building out your own grid!
Remember the good ol’ days when Flexbox came out! Everyone was so excited that they didn’t need to use floats, positioning or inline displays anymore. Well almost the same excitement if not even more joy was expressed when CSS Grid Layout came out. Unlike Flexbox, which was only a 1-dimensional layout model, CSS Grid is a 2-dimensional model that can make both rows and columns dynamic and responsive. Even better, there is no library necessary to apply this amazing grid layout.
CSS Grid is one of the most powerful layout tools, but unfortunately it isn’t fully supported with older browser versions or IE11. Users should be cautious and aware of this partial support. Of course we would like to shun IE users and not account for them, but we need to make sure our layouts appear nicely for all users. Since Flexbox has more support than CSS Grid in most of the older browser versions we can apply a Flexbox layout as a fallback if CSS Grid isn’t supported.
