
💡 _This post is part of [my Today I Learned (TIL) series](/blog/series/today-i-learned). 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](https://ambientimpact.com/web/snippets/equal-height-rows-in-css-grid-layout)
  - [`grid-auto-rows` - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows)
  - [`grid-auto-rows` - CSS-Tricks](https://css-tricks.com/almanac/properties/g/grid-auto-rows/)
  - [CSS `grid-auto-rows` Property - W3Schools](https://www.w3schools.com/cssref/pr_grid-auto-rows.php)
 
## 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)](https://youtu.be/GV9UaFgZ6Q0)
  - [Knitting Help - Slow Motion Judy's Magic Cast-On (VeryPink Knits)](https://youtu.be/MglfYj7tMiU)


Here are a few things I learned today (August 5th, 2023).

Today I Learned

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


Scroll-to-top buttons are great for pages that are long enough to require a few scrolls to read everything. They're even better for extremely long pages. Scrolling is a lot of work for some users, especially on a mobile device. We (website creators) can greatly reduce the amount of work it takes to scroll our pages with surprisingly little effort on our part.

One example is the [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1), which is 140,923 pixels tall at the time of this writing. I'm not calling them out, it's just one of my favorite pages on the entire internet! [It's a great resource for making accessible custom components](https://ashleemboyer.com/my-favorite-resource-for-making-accessible-custom-components).

Making a scroll-to-top button and making it scroll smoothly is probably a lot easier than you think. It's definitely a lot easier than _I_ thought! The code bits I'm about to show are for React and SCSS, but you don't need to know either. The basic concepts here are for JavaScript and CSS. We'll also cover how to get rid of the smooth scrolling when it's an accessibility concern.The best part of this approach? It requires no focus management! <span aria-hidden>🎉</span>

## Prerequisites

If you don't already have one, you need to add a Skip Navigation Link to your site. It's a quick, easy win as well, and the instructions below reference the one I use on my site. Not sure how to do it? Then read my post on [How I Added a Skip Navigation Link to My Next.js Site](/blog/how-i-added-a-skip-navigation-link-to-my-next-js-site)!

## The React Code

As you may have read in [my post about Skip Navigation Links](/blog/how-i-added-a-skip-navigation-link-to-my-next-js-site#what-does-the-code-look-like), I use Next.js Per-Page Layouts to help me render repeated content, such as navigation links, on many pages. The layout I use for the navigation header is where I placed a Skip Navigation Link and Scroll-to-Top link. The code looks something like this:

```tsx
import styles from './base-layout.module.css';

const BaseLayout = ({ children }) => {
  return (
    <div>
      <a href="#main-content" id="skip-navigation-link">
        Skip Navigation
      </a>
      <SiteHeader />
      <main id="main-content" tabIndex={-1}>
        {children}
      </main>
      <a href="#skip-navigation-link">Back to Top</a>
      <SiteFooter />
    </div>
  );
};
```

What's important from this code:

1. The Scroll-to-Top link goes to the first focusable control on the page, which should be a Skip Navigation Link.
2. The `href` of the Scroll-top-Top link matches the `id` of the Skip Navigation Link.

## The SCSS Code

The code below takes an accessibility- and browser-support- first approach. Rather than making the default behavior for scrolling be smooth, an animation which can be physically harmful to some folks (including myself), it only applies smooth scrolling when two conditions are true:

1. The `prefers-reduced-motion` query is supported ([see the CanIUse.com page](https://caniuse.com/mdn-css_at-rules_media_prefers-reduced-motion))
2. The value of the setting is `no-preference` (which unfortunately is the default value)

```scss
html {
  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}
```

One thing to keep in mind is that [`scroll-behavior` does not have full browser support](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior#browser_compatibility). At the time of writing, the feature is still in development for Safari.

## Conclusion

That's it! It really is just a few lines of code. After you add this, everyone will be able to quickly scroll to the top of your website. You've also made it so your site doesn't accidentally harm someone who can't tolerate animations! Well done. I am proud of you!


Adding a scroll-to-top button with smooth scrolling is as easy as adding a few lines of code.

Accessible, Smooth Scroll-to-top Buttons with Little Code


Let's say you allow 5 sizes of icons in your web application and they're in 6-pixel increments: 12, 18, 24, 30, and 36. Your Sass file might have something like the following to handle this:

```
.Icon {
  &--size-12 {
    width: 12px;
    height: 12px;
    font-size: 12px;
  }

  &--size-18 {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }

  &--size-24 {
    width: 24px;
    height: 24px;
    font-size: 24px;
  }

  &--size-30 {
    width: 30px;
    height: 30px;
    font-size: 30px;
  }

  &--size-36 {
    width: 36px;
    height: 36px;
    font-size: 36px;
  }
}
```

These all look really similar, right? The class names all have the same format, and each one sets a `width`, `height`, and `font-size` to be the same thing. Would you believe me if I told you that it's possible to dynamically create blocks of CSS for class names in Sass?

Well, believe me! It's true!

Here's one way you can introduce a `@for` to do this:

```
.Icon {
  @for $i from 1 through 5 {
    $base-size: 12;
    $increment: 6;
    $calculated-size: $base-size + ($i * $increment);

    &--size-#{$calculated-size} {
      width: #{$calculated-size}px;
      height: #{$calculated-size}px;
      font-size: #{$calculated-size}px;
    }
  }
}
```

What if you don't have even increments, though? You can also loop through an array of values like this:

```
$icon-sizes: 12, 16, 32, 48;

.Icon {
  @each $size in $icon-sizes {
    &--size-#{$size} {
      width: #{size}px;
      height: #{size}px;
      font-size: #{size}px;
    }
  }
}
```


Repeated code takes up a lot of space. Sass can help you reduce repetitive and similar CSS code.

Posts Related to the "css" Tag