TIL #2: grid-auto-rows CSS property and Judy's Magic Cast-On

💡 This post is part of my Today I Learned (TIL) series. Each section below describes a thing I learned today and the resources I used to learn it.

CSS property grid-auto-rows

• Why I learned this: While working on my website migration to use the Next.js App Router, I noticed that at smaller/zoomed viewports my grids of blog post links have different sized heights. I think grids of card-like elements look nice with equally sized rows and heights, so I Googled “css make rows in a grid same height”. That search led me to the grid-auto-rows CSS property.
• How I used this: All I needed to do in my case for this to work was add grid-auto-rows: 1fr; to my CSS class that set display: grid;. I figured I would need a height: 100%; on the child elements, but I didn’t!
• Resources I referenced:
  • Equal height rows in CSS Grid Layout - Matei Stanca
  • grid-auto-rows - MDN
  • grid-auto-rows - CSS-Tricks
  • CSS grid-auto-rows Property - W3Schools

Judy’s Magic Cast-on

• Why I learned this: I’ve actually done this cast-on many times, but it’s been many months and I couldn’t remember. I’ve always used it for casting on toe-up socks. I’m actually not sure if it’s used in other patterns! Maybe finger-up mittens? 😂
• How I used this: I finished knitting my friend’s baby items so it was time to start a new project. I promised my partner my next project would be a pair of socks for him! I tend to only knit toe-up socks so I needed to recall this fancy cast-on.
• Resources I referenced:
  • Knitting Help - Judy’s Magic Cast-On (VeryPink Knits)
  • Knitting Help - Slow Motion Judy’s Magic Cast-On (VeryPink Knits)