Skip Navigation
home

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

Published Saturday, August 5, 2023 ā€” 4 minute read

šŸ’” 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:

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:
Back to Top