Responsywna ilość placeholderów dla pustych komórek w CSS grid

Witam,
tworzę aktualnie układ siatki, który ma wyświetlać placeholdery tak, jak na zdjęciu:
Mały rozmiar ekranu:

Duży rozmiar ekranu:

W tym celu moją tablicę z linkami (tymi z logo SO i adresem) wypełniam pustymi wartościami i renderuję w react

<S.List isempty={bookmarks.length === 0 ? 1 : 0}>
  {padArray(bookmarks, 16)?.map((bookmark, i) => {
      if (bookmark === null) {
          return <S.ItemPlaceholder key={i} />;
      }
      return (
          <S.Item href={bookmark.url} target="_blank" key={i}>
              ...
          </S.Item>
      );
  })}
</S.List>

To mój styl całej listy (diva, w którym znajdują się linki - bez przycisku dodaj)

export const List = styled.div`
    display: grid;
    gap: 0.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    padding: 0 0.4rem 0 0;
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

    @media (max-width: 1600px) {
        ${ItemPlaceholder}:nth-child(n+10) {
            display: none;
        }
    }
`;

Jednak 1600px nie zawsze odpowiada "przeskokowi", który zmienia układ z 3 kolumnowego na 4 kolumnowy. Czy da się stworzyć media query, które reaguje na zmianę układu siatki?

A czemu nie zawsze odpowiada przeskokowi? Jak sobie to dokładnie policzysz to będzie odpowiadało. Ale lepiej moim zdaniem połączyć liczbę kolumn z tym w jednym query żeby była spójność i po prostu liczbę kolumn w grid-template-columns ustalić na stałe na 3 lub 4 dla różnych szerokości. Albo nic nie ukrywać w ogóle, tylko ustalić max-height i overflow hidden i niech się puste nadmiarowe itemy renderują w próżni.

Możesz też już zacząć używać CSS container queries zamiast media queries
https://caniuse.com/css-container-queries
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

i nowe jednostki container units cqw, cqh, cqi, cqb, cqmin, and cqmax.
To powinno być znacznie dokładniejsze niż media query

Nie musisz renderować zmiennej ilości elementów.

Możesz zawsze wyrenderować w reacie tyle samo, a potem w CSS schować nadmiarowe, np tak:

@media (max-width: 768px) {
    #container {
        grid-template-columns: 1fr 1fr 1fr;
    }
    #container img:nth-child(n+4) {
        display: none;
    }
}

Przy czym powinieneś pewnie użyć container queries zamiast media queries, tak jak mówi przedmówca.