Things change rapidly in the WordPress world. The content in this post is more than a year old and may no longer represent best practices.
Here’s a bibliography for the April 2017 meetup presentation about Flexbox and CSS Grid. More is being published on both of these topics all the time. You should definitely follow Rachel Andrew to keep up with Grid developments.
Flexbox Articles
- CSS Flexible Box Layout Module Level 1 (W3C)
- A Complete Guide to Flexbox (CSS-Tricks)
- CSS Flexbox Is Entirely Logical (Almost) (Paul Robert Lloyd)
- How Flexbox works — explained with big, colorful, animated gifs (freeCodeCamp)
- How to use Flexbox to create a modern CSS card design layout (Flywheel)
- Layouts of the Future—Flexbox Layout (Scotch.io)
- Solved by Flexbox (Philip Walton)
- Squeezy Stretchy Flexbox Nav (CSS-Tricks)
- The Ultimate Flexbox Cheat Sheet (Sketching with CSS)
- The Web Designer’s Guide to Flexbox (Creative Bloq)
- Understanding CSS3 Flexbox for Clean, Hack-Free Responsive Design (WPMUDEV)
- What the Flexbox? Free Video Course (Wes Bos)
CSS Grid Articles
- CSS Grid Layout Module Level 1 (W3C)
- A Complete Guide to CSS Grid (Codrops)
- A Complete Guide to Grid (CSS-Tricks)
- CSS Grid Layout Terminology, Explained (Bits of Code)
- CSS Grid Layout: A New Layout Module for the Web (WebKit)
- CSS Grid—The Future of Web Design is Already Here (Nelio)
- Does CSS Grid Replace Flexbox? (CSS-Tricks)
- Feature Queries are on the Rise (Bryan Robinson)
- Using Feature Queries in CSS (Mozilla Hacks)
- Foundation & CSS Grid: Think Beyond the Page (ZURB Blog)
- Grid and Grid Inspector in Firefox (Mozilla)
- Grid Auto-Placement Is Ready (Rego’s Everyday Life)
- How to create a simple layout with CSS Grid Layouts (Flywheel)
- Playing with CSS Grids (14 Islands)
- Practical CSS Grid: Adding Grid to an Existing Design (A List Apart)
Interactive Learning Games
From Rachel Andrew, the Goddess of Grid
- CSS Grid, Flexbox and Box Alignment: Our New System For Web Layout (Smashing Magazine)
- CSS Grid. One layout method not the only layout method
- CSS3 Layout Modules 2nd Edition (5 Simple Steps)
- Free Learn Grid Video Series
- Get Ready for CSS Grid Layout (A Book Apart)
- Grid “Fallbacks” and Overrides
- Grid by Example
- Learning CSS Grid Layout
- Should I use Grid or Flexbox?
Leave a Reply