diff --git a/content/blog/wingingit/winging-it-10.md b/content/blog/wingingit/winging-it-10.md new file mode 100644 index 000000000..d5bbf7a46 --- /dev/null +++ b/content/blog/wingingit/winging-it-10.md @@ -0,0 +1,65 @@ +--- +title: Learn CSS Grid First +episode: 10 +sponsors: false +tags: + - CSS + - Grids + - Layout +author: + - miriam + - stacy +date: 2024-07-23 +length: 54 mins +image: + src: winging-it/winging-it-10.jpg +media: + - youtube: aDMWD_CYpEI +summary: | + We talk with Stephanie Eckles + – the brain behind ModernCSS.dev and SmolCSS.css + – about CSS grids. + We'll 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! +--- + +{% import "embed.macros.njk" as embed %} +{% import "utility.macros.njk" as utility %} + +{{ embed.figure( + data=media +) }} + +{{ utility.main_action( + 'Subscribe to Channel »', + subscribe_url +) }} + +## What we cover: +- Is flexbox alone good enough? +- When do you use grid vs flexbox? +- [CSS Grid Terminology](https://codepen.io/stacy/pen/ObmjeZ) + +### 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 + +## Links: +- [CSS Grid Area](https://ishadeed.com/article/css-grid-area/) +- [3 CSS Grid Techniques to Make You a Grid Convert](https://moderncss.dev/3-css-grid-techniques-to-make-you-a-grid-convert/) +- [CSS Grid Experiments](https://codepen.io/collection/DQvYpQ) by Olivia Ng + +## Demos: +- [Quick Layout with CSS Grid](https://codepen.io/miriamsuzanne/pen/OJGVzbK) +- [Mix and match functions/intrinsic sizes for all the squish](https://codepen.io/miriamsuzanne/pen/wvKErbK) +- [Subgrid Use Case](https://codepen.io/miriamsuzanne/pen/jRdgLB) + +## Learn More About CSS Grid: +- [Cascading Style Systems: Resilient & Maintainable CSS](https://smashingconf.com/online-workshops/workshops/modern-css-miriam-suzanne) diff --git a/src/images/winging-it/winging-it-10.jpg b/src/images/winging-it/winging-it-10.jpg new file mode 100644 index 000000000..9415cff2a Binary files /dev/null and b/src/images/winging-it/winging-it-10.jpg differ