Dive into a comprehensive 50-minute crash course on Flexbox and Grid, essential layout tools for web design with Elementor. Learn the fundamentals of Flexbox containers, including column and row layouts, justification, alignment, and wrapping. Explore advanced concepts like child containers, width percentages, and container gaps. Transition into Grid layouts, understanding columns, rows, auto-flow, and item justification. Discover when to use Grid effectively, how to implement containers within Grid, and master Grid spanning techniques. Gain practical insights to enhance your web design skills and create more flexible, responsive layouts.
Overview
Syllabus
Intro
Adding Flexbox Containers
Flex Column
Flex Column Reversed
Flex Column Justify Content
Flex Column Align Items
Flex Column Element Stacking
Items Align Self
Flex Row
Flex Row Justify Content
Flex Row Align Items
Items Align Self again
Container Gaps
Flex Row Wrap
Flex Row Wrap Align Content
Flex Child Containers
Flex Column Child
Flex Row Wrap Child
% Width vs Container Gaps
Overuse of Child Containers
Grid Intro
Grid Columns and Rows
Grid Gaps
Grid Auto Flow Row and Column
Grid Justify Items
Grid Align Items
Grid Column Widths with fr & px
When is Grid useful?
Containers inside Grid
Grid is needed for some layouts
Grid Spanning per Container
Grid Spanning on the Parent
Conclusion
Taught by
Web Squadron
