This course teaches learners how to use CSS Grid to create responsive and dynamic layouts. By the end of the course, students will be able to design complex web layouts using grid containers, explicit and implicit grids, grid tracks, gaps, and areas. They will also learn how to position items using grid line numbers, names, and areas, as well as how to align grid items and tracks effectively. The course is suitable for web developers and designers looking to enhance their CSS layout skills.
Overview
Syllabus
- Grid Container
- Explicit Grid
- Minimum and Maxmum Grid Track Sizes
- Repeating Grid Tracks
- Grid Gaps (Gutters)
- Positioning Items by Grid Line Numbers
- Spanning Items Across Rows and Columns
- Naming Grid Lines
- Positioning Items by Line Names
- Naming and Positioning Items by Lines with the Same Name
- Naming and Positioning Items by Grid Areas
- Implicit Grid
- Implicitly Named Grid Areas
- Implicitly Named Grid Lines
- Layering Grid Items
- Aligning Grid Items (Box Alignment)
- Aligning Grid Tracks
Taught by
Jonathan Suh
