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.
After multiple attempts and wonky grids I was finally able to come up with a grid system that used CSS Grid with a Flexbox fallback that looked consistent in all browsers. In order to accomplish this feat, I needed ways to check which browser I was using. A handy feature query in CSS to check in a browser if a CSS property is supported is @supports. This query checks the browser support and will then apply the CSS properties within the block statement. Slack’s redesign of their website was a great example of this feature query.
@supports (display: grid) {
display: grid;
}
