.grid {
  --column-count: 1;
  --column-gap: 30px;
  --column-gap-size: calc((var(--column-count) - 1) * var(--column-gap));
  --column-size: calc((100% - var(--column-gap-size)) / var(--column-count));
  display: grid;
  gap: var(--column-gap);
  grid-template-columns: repeat(var(--column-count), var(--column-size));
}

/* then the breakpoints like: */
@media (width >= 600px) {
  .grid {
    --column-count: 3;
  }
}

I do this because 1fr != 1fr if a column content blows out the width or whatever (never quite understood that behaviour). It also gives me custom props for the exact column size which I’ve found useful.

so cool

@function --cols(--column-count: 3, --breakpoint: 400px) {
    result: if(
        style(100vw < var(--breakpoint)): 1fr; 
        else: repeat(var(--column-count), 1fr)
    );
}

.grid {
    grid-template-columns: --cols();

        /* if you want a custom number of columns */
    grid-template-columns: --cols(5); 

    /* if you want to set the custom breakpoint */
    grid-template-columns: --cols(5, 600px); 
}

see https://codepen.io/bigandy/pen/ZYbgOzq?editors=0100

https://bsky.app/profile/kevinpowell.co/post/3lynvaj2cd22x

https://bsky.app/profile/css-only.dev/post/3lynvocudcs23

https://bsky.app/profile/anatudor.bsky.social/post/3lynw35jkts2b

html {
  —vw-sm: true;

  @media (min-width: 37.5rem) {
    —vw-md: true;
  }

  @media (min-width: 80rem) {
    —vw-lg: true;
  }
}

.grid {
  grid-template-columns: 1fr;

  @container style(—vw-md: true) {
    grid-template-columns: repeat(3, 1fr);
  }

  @container style(—vw-lg: true) {
    grid-template-columns: repeat(5, 1fr);
  }
}

So if you refactor and this component ends up inside a column of its own, or a different layout it responds as initially required.

That way, if the user cranks up the font size, the layout can adjust accordingly and stay at one column until more space is available, instead of trying to force gigantic text into three columns with only a few hundred pixels of room to work with.