Responsive Layout

Learn how to design responsive layouts with HTML and CSS, including the latest standards: Flexbox and Grid.

Introduction

• Go cross-platform with responsive design
• What you should know

1. Basic Page Structure

• Viewport
• Required CSS
• Display property
• Positioning
• Floats
• Units

2. Responsive Layout

• Responsive design
• Media queries
• Flexbox and Grid
• Accessibility
• Browser support

3. Grid Layout

• Intro to CSS Grid
• Defining rows and columns
• Grid gap
• Sizing rows and columns
• Placing grid items
• Grid alignment overview
• Aligning tracks
• Aligning grid items within tracks
• Aligning individual grid items
• Variable columns
• Grid template areas
• Naming grid lines
• Ordering grid items
• Grid flow and implicit tracks
• Challenge: The rainbow box
• Solution: The rainbow box

4. Flexbox

• Defining a flexbox container
• Direction
• Wrapping
• Ordering flex items
• Flexbox alignment overview
• Aligning items on main axis
• Aligning items on cross axis
• Aligning lines on cross axis
• Aligning individual flex items
• Distributing space to flex items
• Challenge: Floats to flexbox
• Solution: Floats to flexbox

5. Layout Design

• Centering content
• 3-column layout with grid areas, part 1
• 3-column layout with grid areas, part 2
• 3-column layout with flexbox
• 12-column layout setup
• 12-column layout for medium viewports
• 12-column layout for wide viewports

Conclusion

• Next steps