Learn CSS Grid First

With special guest Stephanie Eckles

on Winging It episode 10 with Miriam & Stacy on July 23, 2024 | 54 mins

We talk with Stephanie Eckles – the brain behind ModernCSS.dev and SmolCSS.dev – about CSS grids. We look at a few of the most common grid patterns, to show you how (and why) you can get started working grids into your CSS toolkit!

Winging It Ep 10: Learn CSS Grid First (this episode)
Winging It Ep 12: Learn CSS Grid - Part 2

Subscribe to Channel »

What we cover:

Is flexbox alone good enough?
When do you use grid vs flexbox?
CSS Grid Terminology

Different grid techniques:

Implicit grid to add spacing and alignment
Auto-repeating grids for gallery layouts
auto-fit vs. auto-fill
Grid areas for overlapping content
Named lines
minmax()
Single-area grids vs. absolute positioning

Demos:

Webmentions

David G. Smith

August 24, 2024 from mas.to

@OddBird @5t3ph “Best practice is a conversation.” 🫶

Recent Episodes

Winging It post type

Mixins & Functions to Streamline CSS

With special guest Roma Komarov

on Winging It episode 24 with Miriam & Stacy on Aug 27 | 59 min

The CSS Working Group got together in August to discuss a range of old and new issues. The following week, Miriam Suzanne and Stacy Kvernmo chatted with CSS expert Roma Komarov about how to create reusable and more flexible CSS using mixins and functions, what happened in the CSSWG meetings…

see all Winging It posts
Winging It post type

Container queries are widely available!

on Winging It episode 23 with Miriam on Aug 13 | 3.5 min

Happy 30-month anniversary to Container Queries – shipping in every browser since February of 2023. It was supposed to be impossible, but here we are!

see all Winging It posts
Winging It post type

Avoid this mistake when anchor positioning a popover!

on Winging It episode 22 with James on Aug 12 | 1 min

Are you positioning a popover with CSS anchor positioning and position-area? Make sure to override the default margins on the popover.

see all Winging It posts