CSS grid-template-column - évitez une seule colonne dans une nouvelle ligne

Question

J'utilise la grille CSS pour redimensionner les colonnes et les déplacer vers de nouvelles lignes lorsqu'elles ne correspondent pas. Voici le code qui explique tout :

.tiles-container {
  display: grid;
  grid-gap: 6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 2fr));
}

a {
  background: red;
  height: 100px;
}

<div class="tiles-container">
  <a></a>
  <a></a>
  <a></a>
  <a></a>
</div>

grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 2fr));

Maintenant, ce que je veux éviter, c'est de déplacer une seule (une seule) colonne vers une nouvelle ligne. Au lieu de cela, il s'effondre plus tôt et rapproche les 2 colonnes.

Pour l'expliquer de manière plus intuitive, ceci est acceptable :

█ █ █ █

Aussi :

█ █ █

██

Aussi :

██

██

C'est inacceptable :

█ █ █

█

Je veux éviter les requêtes inutiles des médias ici. Voici mon code : https://jsfiddle.net/tucado/0czokyxa/3/

Answer 1

Si quelqu'un a le même problème, voici la solution : https://jsfiddle.net/tucado/0czokyxa/5/

et CSS :

.tiles-container {
    /* first breakpoint*/
    --w1:1200px;
    --n:6;
    /* second breakpoint*/
    --w2:800px;
    --m:4;
    /* third breakpoint*/
    --w3:400px;
    --p:2;

    display:grid;
    grid-template-columns:
      repeat(auto-fill,
        minmax(clamp(clamp(clamp(  
              100%/(var(--n) + 1) + 0.1%,
                (var(--w1) - 100%)*1000,
              100%/(var(--m) + 1) + 0.1%), 
                (var(--w2) - 100%)*1000,
              100%/(var(--p) + 1) + 0.1%), 
                (var(--w3) - 100%)*1000,
              100%), 1fr));
    gap:10px;
    border:1px solid;
    overflow:hidden;
    margin:5px;
    resize:horizontal;


  }

  .tiles-container > a {
    height:100px;
    background:red;
  }

Merci @Temani-Afif