- [Narrator] CSS Grid is a new CSS specification…that gives us the most powerful way yet…to control page layouts.…According to the W3C Candidate Recommendation…for the CSS Grid Layout Module,…this module defines a two-dimensional…grid-based layout system, optimized…for user interface design.…In the grid layout model, the children of a grid container…can be positioned into arbitrary slots in a predefined…flexible or fixed-size layout grid.…What does that mean?…Well, it means that we can draw a grid in a container,…and put content wherever we want within that grid,…completely independent of semantic HTML structure.…
That's pretty cool.…So let's take a look at some basic…CSS Grid concepts and terminology.…So a grid is any element…with its display properties set to grid.…Grids have rows, and those are horizontal lines,…and columns, which are the vertical lines.…Next, we've got grid lines.…And a grid line is the line that makes up the grid.…They could be horizontal or vertical.…And a grid track is the space between two grid lines.…
Author
Carrie Dils
Released
6/9/2017- What is CSS?
- Understanding how CSS works with HTML
- Applying fonts
- Understanding the classic box model
- Setting margins and padding
- Positioning elements
- Basic CSS layout concepts
- Media types and media queries
- Working with CSS frameworks and CSS grids
- Creating responsive layouts
- Tools that help you write and maintain CSS
Skill Level Beginner
Duration
Views
-
Introduction
-
Welcome55s
-
Exercise files28s
-
-
1. CSS Basics
-
What is CSS3m 41s
-
Default browser styles2m 47s
-
CSS syntax3m 9s
-
Basic selector types6m 37s
-
How CSS works with HTML4m 39s
-
CSS authoring options2m 46s
-
How browsers apply styles5m 19s
-
Challenge56s
-
Solution2m 16s
-
-
2. CSS Specifications
-
CSS: then and now3m 14s
-
Available CSS resources3m 39s
-
Checking browser support4m 16s
-
-
3. Common CSS Concepts
-
CSS normalization and resets4m 35s
-
Working with fonts4m 48s
-
Margins and padding3m 41s
-
Borders and backgrounds5m 59s
-
Working with color4m 13s
-
Units of measurement3m 7s
-
Vendor prefixes1m 29s
-
Challenge1m 30s
-
Solution1m 49s
-
-
4. CSS Layouts
-
Structuring a page with CSS2m 39s
-
Element positioning5m 46s
-
Floats3m 18s
-
Flexbox2m 21s
-
CSS Grid Layout module2m 25s
-
-
5. Working with CSS
-
Organizing CSS4m 2s
-
Validating CSS2m 5s
-
-
6. Responsive CSS
-
Working with media queries2m 17s
-
What is mobile-first1m 51s
-
7. Going Further with CSS
-
CSS frameworks and grids1m 23s
-
CSS preprocessors2m 16s
-
-
Conclusion
-
Next steps42s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press 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: CSS Grid Layout module