Creating Layouts with CSS Grid

Description

In this course, you will :

• Learn how to use the brand new CSS Grid system to solve layout issues for good.
• Learn why CSS Grid is a better way to layout.
• You'll be up and running with the bare minimum of code to begin using CSS Grid.
• Investigate the CSS Grid specification in depth, learning how to create any layout you can imagine.
• By the end of this course, you'll have a solid understanding of this critical technology required to create modern, robust, and responsive web layouts.

Syllabus :

1. Meet CSS Grid

•  Why CSS Grid Is Awesome 
•  Why CSS Grid Is Scary 
•  The World of Layout Design

 

2. Up and Running with CSS Grid

•  The Two-step Grid Process 
•  Defining Grid Columns 
•  Positioning Grid Items 
•  Grid Rows and the Implicit Grid 
•  Summarizing the CSS Grid Workflow 

 

3. Defining Grids: In-depth

•  Defining Grids 
•  Grid Track Sizes 
•  Grid Shorthands 
•  Grid Flow 
•  Implicit Grid 4m
•  Grid Gaps 
•  12-column Grid System 

 

4. Positioning Items: In-depth

•  Positioning Items 
•  Positioning Keywords 
•  Positioning Shorthands 
•  Alignment and Justification: Concepts 
•  Alignment and Justification: Properties 
•  Accessible Grids 
•  Improving Your 12-column Layout 
•  Positioning Items Summary 

 

5. Advanced CSS Grid

•  Advanced CSS Grid 
•  Grid Development Tools 
•  Naming Grid Lines 
•  Naming Grid Areas 
•  The Grid Property Revisited 
•  Responsive Design with CSS Grid 
•  Subgrids 
•  Understanding Track Sizing 

Show more