added winging it 10 as post

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)