From the course: CSS: Advanced Layouts with Grid
Unlock the full course today
Join today to access over 23,200 courses taught by industry experts.
Check for grid support - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid
Check for grid support
- [Instructor] The very first thing we need to do is make sure the browser actually supports CSS grid before we ask it to use CSS grid for our layouts. I'll do that all the way at the bottom of style, main.CSS. You'll find here there's already a common that sets up CSS grid layout for modern browsers. And inside the section I want to use a feature query to ask the browser, "Hey, do you support CSS grid? If so, run this code, otherwise, just ignore everything." It looks like this, at supports. And then we specify what we are looking for, and in this case I want to test for grid area auto. Now if you look on the internet, you'll find a lot of people recommend testing for display colon grid. The problem with that is some older browsers actually have legacy support for the old version of CSS grid, so they'll answer true to that question even though they don't support the current modern spec. As a result, things that you add in that you think should work, might not work in these older…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
(Locked)
The challenge43s
-
Overview of the starting point2m 8s
-
(Locked)
Check for grid support1m 15s
-
(Locked)
Create the main grid3m 19s
-
(Locked)
Position items on the grid2m 16s
-
(Locked)
Add a third column for wider viewports5m 59s
-
(Locked)
Breaking the grid3m 55s
-
(Locked)
Justify the grid inside the grid container2m 30s
-
(Locked)
Use white space to perform magic6m 56s
-
(Locked)
-
-
-
-
-