From the course: CSS: Advanced Layouts with Grid

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Check for grid support

Check for grid support - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

Check for grid support

- [Instructor] Anytime you're working with CSS Grid it's a good idea to boot up the current document in the browser, open the developer tools, go to the layout panel, and make sure you can visualize the grid so you can see exactly what's going on. Right now there are no active grids in our layout and you can see the current layout is still this max width center aligned single column. If you go to your style main dot CSS and scroll all the way to the bottom, you'll see how that is a cheat. It's a single rule here that targets the site class. You'll remember the site class is appended to the body, and then it just says max width 50ms and margin left and right auto. So this is just the standard method for creating a responsive single column layout that's always centered in the screen. The first thing we need to do is make sure our browser actually supports CSS Grid and for that we'll use feature quirk. Looks like this: @supports and then we'll ask for support for grid area auto and this…

Contents