Lessons
view all ⭢
lesson
The Reel ComponentComposing Layouts in ReactIn this lesson, you will learn how to build the ColumnDrop primitive and use it to layout BlogPost cards.
lesson
The ColumnDrop ComponentComposing Layouts in ReactIn this lesson, you will learn how to build the ColumnDrop primitive and use it to layout BlogPost cards.
lesson
Other Layout TechniquesMastering CSS LayoutOther layout techniques complimentary to the design patterns discussed.
lesson
CSS Grid vs CSS FlexboxMastering CSS LayoutWe 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.
lesson
The Column Drop Design Pattern in FlexboxMastering CSS LayoutThe grid pattern is impossible using Flexbox, but the column drop is available and achieved using a flex-wrap, justify-center, and, flex-grow.
lesson
The Center Design Pattern in FlexboxMastering CSS LayoutThe center pattern sets the same margin properties, but the children is implemented using flex properties instead of grid.
lesson
The Cover Design Pattern in FlexboxMastering CSS Layouthe cover pattern is almost identical to the grid implementation, but just uses flexbox properties.
lesson
The Responsive Split Design Pattern in FlexboxMastering CSS LayoutThe split can be made even more responsive by adding the minItemWidth and switchAt.
lesson
The Split Design Pattern in FlexboxMastering CSS LayoutThe Split pattern using flex box can seem complicated, but is a very powerful when all the fractions are setup.
lesson
The Inline-Cluster Design Pattern in FlexboxMastering CSS LayoutThe inline-cluster pattern is accomplished using the wrap and align-items center.