Explore the power of subgrid in CSS by building a robust grid system in this 36-minute tutorial video. Learn to set up a master grid, place child elements, create and fix subgrid layouts, and improve the overall structure using custom properties. Discover techniques for responsive design at larger screen sizes, create custom sections, and break out of container constraints. Gain insights into hero area design and advanced grid techniques. Follow along with provided code examples and expand your CSS grid skills to create more flexible and maintainable layouts.
Overview
Syllabus
- Introduction
- Setting up the master grid
- Placing the children on the grid
- Creating the subgrids
- Fixing the subgrid layouts
- Creating a more robust master grid
- Improving the master grid with custom properties
- Getting things on our grid at larger screen sizes
- Custom sections with custom properties
- Breaking out of the "container"
- The hero area
Taught by
Kevin Powell
