Welcome to
Mastering CSS Layout
Unlock the Secrets of CSS Layouts with Practical Expertise in Design Patterns
Course Syllabus and Content
Learn the Best Practices and Design Patterns behind every CSS layout. Know exactly what you should and shouldn't do at all times. And develop the intuition to break every layout into its simplest building blocks and the ability to recreate it with both CSS Grid and Flexbox.
Introduction
1 Lesson 2 Minutes
Learn why Design Patterns are so important and how they simplify and systemize CSS layouts
Introduction to Mastering CSS Layout using Design Patterns
Design Patterns in CSS Layout
8 Lessons 16 Minutes
Learn what are the 7 design patterns behind every single CSS layout in the world. What they are and when to use each of them.
Introduction to Design Patterns
The Stack design pattern is used when you need to stack elements on top of each other and set space between them.
The inline-cluster pattern is used to place elements inline, set space between them, and cluster the elements when they run out of inline space.
The split pattern is for putting two elements next to each other, each taking up a fraction of the inline space.
The cover pattern is used to vertically center content within an element.
The center pattern is used to cap out the inline growth while centering the content inside its parent.
The column-drop pattern is used to a grid-like layout where each row has its column layout.
The Grid pattern creates equally spaced columns that persist across rows instead of the column-drop pattern, which does not.
Design Patterns using CSS Grid
7 Lessons 32 Minutes
Deep dive into Design Patterns using CSS Grid. Learn exactly how to build each pattern with CSS Grid and practice your skills.
Introduction to the application and attribute selectors
In this lesson, we will learn how to implement the stack pattern using CSS Grid
CSS Grid can help you achieve part of this pattern, but it won't work for everything since it won't allow items to “Cluster” at smaller viewports.
CSS Grid allows you to set two columns using fr units to set ratios.
The cover works like the stack but vertically centers a specific layout part.
Half of the centering is done through your typical auto margin technique. The children are centering through a few extra CSS Grid properties.
The Grid pattern combines a few specific CSS Grid Properties that allow for an auto grid layout optimized to the inline size available to the component.
Design Patterns using Flexbox
7 Lessons 30 Minutes
Deep dive into Design Patterns using Flexbox. Learn exactly how to build each pattern with Flexbox and practice your skills.
In this lesson, we will learn how to implement the stack pattern using Flexbox.
The inline-cluster pattern is accomplished using the wrap and align-items center.
The Split pattern using flex box can seem complicated, but is a very powerful when all the fractions are setup.
The split can be made even more responsive by adding the minItemWidth and switchAt.
he cover pattern is almost identical to the grid implementation, but just uses flexbox properties.
The center pattern sets the same margin properties, but the children is implemented using flex properties instead of grid.
The grid pattern is impossible using Flexbox, but the column drop is available and achieved using a flex-wrap, justify-center, and, flex-grow.
Wrapping up
3 Lessons 5 Minutes
Learn advanced layout techniques, find out when to use Flexbox and when to opt in for CSS Grid and wrap up.
We will consolidate the two spreadsheets into a single spreadsheet with what I consider the optimal versions of each design pattern while acknowledging the good and bad of each version.
Other layout techniques complimentary to the design patterns discussed.
Wrap up of the course