Learn about browser support for grid and flexbox.
- [Instructor] Although Flexbox and Grid have wide support in modern browsers, there will still be some users who are using browsers that do not support these parts of CSS. In particular, users in countries outside of North America and Europe are more likely to be using older devices, older browsers or inexpensive mobile phones that lack support for Flexbox and Grid. With responsive design, you want your layout to look good in all different viewport sizes but also you want to make it usable for as many people as possible. It may not look the way you want it to look in these older or inexpensive devices but you can at least make sure the site works correctly and allows users to read all the content.
Browsers ignore CSS that they don't understand. So, if a browser doesn't understand Flexbox or Grid, it just ignores that CSS. If you made sure to create your HTML in a good order, then the content will be displayed in that order. Often this is enough to make sure that users can at least access all of the content. If you want to make sure your design looks okay in other browsers, there's more you can do. Test on a wide range of devices and browsers or use tools like BrowserStack to do virtual tests. You can target additional CSS to devices that don't support Flexbox and Grid using feature queries.
These work much like media queries but instead of doing a query for something like the width of the viewport, it finds out whether the browser supports a specific feature such as Grid. Feature queries are outside of the scope of this course but you may wish to learn more about them if you need to design for both modern browsers and also browsers that don't support Flexbox and Grid.
Author
Released
10/24/2018- What is responsive design?
- The responsive page structure
- Accessibility and responsive design
- Using media queries
- Designing with CSS Grid
- Designing with CSS Flexbox
Skill Level Intermediate
Duration
Views
Related Courses
-
Introduction
-
What you should know1m 7s
-
1. Basic Page Structure
-
Viewport2m 22s
-
Required CSS3m 39s
-
Display property2m 25s
-
Positioning4m 59s
-
Floats2m 37s
-
Units3m 33s
-
-
2. Responsive Layout
-
Responsive design1m 55s
-
Media queries6m 25s
-
Flexbox and Grid1m 9s
-
Accessibility5m 48s
-
Browser support1m 36s
-
-
3. Grid Layout
-
Intro to CSS Grid2m 10s
-
Defining rows and columns3m 55s
-
Grid gap1m 52s
-
Sizing rows and columns5m 52s
-
Placing grid items5m 51s
-
Grid alignment overview1m 13s
-
Aligning tracks3m 46s
-
Variable columns4m 45s
-
Grid template areas4m 12s
-
Naming grid lines2m 47s
-
Ordering grid items1m 16s
-
Solution: The rainbow box6m 42s
-
-
4. Flexbox
-
Defining a flexbox container1m 53s
-
Direction3m 36s
-
Wrapping2m 30s
-
Ordering flex items1m 28s
-
Flexbox alignment overview1m 39s
-
Aligning items on main axis3m 16s
-
Aligning items on cross axis3m 35s
-
Aligning lines on cross axis3m 15s
-
Challenge: Floats to flexbox1m 21s
-
Solution: Floats to flexbox8m 17s
-
-
5. Layout Design
-
Centering content1m 54s
-
3-column layout with flexbox3m 14s
-
12-column layout setup4m 7s
-
-
Conclusion
-
Next steps35s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Browser support