CSS Flexbox and Grid have changed the game when it comes to web page layout. Unfortunately it is not always so clear how best to use these tools to create the layout we need.
Below is a list of cookbook type resources I have found super helpful (no JavaScript framework required):
- Ten modern layouts in one line of CSS by Una Kravets – This awesome resource includes a video walk through. Una also created a Codepen style playground: https://1linelayouts.glitch.me/
- Common CSS Flexbox Layout Patterns with Example Code by Tobias Ahlin
- CSS Layout by Phuoc-Ng and other contributors – You may have thought you needed a JavaScript framework to implement some of these
- CSS Layout MDN Web Docs
- Getting Started With CSS Layout by Rachel Andrew
- 18 Free Beautiful CSS Layouts for User Interface Designers by Alex Ivanovs
Learn the basics:
- A Complete Guide to Flexbox by Chris Coyier on CSS-Tricks
- A Complete Guide to CSS Grid by Chris House on CSS-Tricks
- What The Flexbox?! by Wes Bos – A free video tutorial series on Flexbox
- CSS Grid by Wes Bos – Another free video tutorial series from Wes Bos
