Grid Lanes – The Future of Masonry Layout
This long-debated solution for masonry layout is now available and it’s time to figure out how to use it. Join us for a deep dive into the workings of Grid Lanes.
Learn CSS Grid First
With special guest Stephanie Eckles
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
What we cover:
Copy permalink to “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-fitvs.auto-fill- Grid areas for overlapping content
- Named lines
minmax()- Single-area grids vs. absolute positioning
Links:
Copy permalink to “Links:”Demos:
Copy permalink to “Demos:”Webmentions
Recent Episodes
Winging It post type
Winging It post typeSurprising Effects of CSS Shorthands
CSS properties come in two excellent flavors – longhand properties have a direct impact on the element, while shorthand properties take a much more convoluted path. There’s a lot going on when we use a shorthand property, with hidden surprises, and reasons we might use one or the other.
Winging It post typeDos & Don’ts of Anchor Positioning
CSS anchor positioning isn’t baseline yet, and there’s good reason for that. You can use it, but it comes with some caveats. James, Stacy, and Miriam cover new resources to make anchor positioning easier, and work through some demos to help you understand how anchor positioning works. We also look…
