In this episode, Amy and James decode Flexbox and CSS Grid. How do you use them? and when do you reach for one over the other?

Sponsors

Vercel

Vercel combines the best developer experience with an obsessive focus on end-user performance. Their platform enables frontend teams to do their best work. It is the best place to deploy any frontend app. Start by deploying with zero configuration to their global edge network. Scale dynamically to millions of pages without breaking a sweat.

For more information, visit Vercel.com

ZEAL is hiring!

ZEAL is a computer software agency that delivers “the world’s most zealous” and custom solutions. The company plans and develops web and mobile applications that consistently help clients draw in customers, foster engagement, scale technologies, and ensure delivery.

ZEAL believes that a business is “only as strong as” its team and cares about culture, values, a transparent process, leveling up, giving back, and providing excellent equipment. The company has staffers distributed throughout the United States, and as it continues to grow, ZEAL looks for collaborative, object-oriented, and organized individuals to apply for open roles.

For more information visit softwareresidency.com/careers

DatoCMS

DatoCMS is a complete and performant headless CMS built to offer the best developer experience and user-friendliness in the market. It features a rich, CDN-powered GraphQL API (with realtime updates!), a super-flexible way to handle dynamic layouts and structured content, and best-in-class image/video support, with progressive/LQIP image loading out-of-the-box."

For more information, visit datocms.com

Show Notes

0:00 Introduction
8:19 When do you start adopting new CSS Properties into Your Workflow
10:25 History of Grids
12:50 Floats in the Olden Days
16:32 Sponsor: Vercel
17:39 Problems Flexbox and Grid Solve
18:45 The Difference Between Flexbox and Grid
21:19 How well do you know all the properties?
- CSS Tricks CSS Grid Cheatsheet
- CSS Tricks Flexbox Cheatsheet
- Kevin Powell on YouTube
- Flexbox Froggy
- What the Flexbox (by Wes Bus on YouTube)
24:49 Sponsor: DatoCMS
25:42 Using Flexbox
30:46 Sponsor: ZEAL
31:39 Favorite Parts about Flexbox
32:42 flex-wrap
34:23 flex-grow
35:11 flex-shrink
36:06 order
38:33 CSS Grid
- CSS Grid course by Wes Bos
39:58 12 Column Grid
45:25 Grid Template Areas
47:01 Displaying Tabular Data
48:48 Grab Bag Questions
49:01 Question #1: What do you think about using grid and flexbox together?
49:49 Question #2: When do you reach for CSS Grid and when do you reach for Flexbox?
50:25 Question #3: Why should he learn Grid if he already knows Flexbox?
51:58 Picks and Plugs
52:11 James's Pick: Charcoal Pillow from Costco
53:15 James's Plug: James Q Quick on TikTok
53:40 Amy's Picks: Drink Holder for Luggage
54:11 Amy's Plug: EverythingSvelte.com