CSS-Grid-Template-Column – einzelne Spalte in neuer Zeile vermeiden

Question

Ich verwende CSS-Raster, um die Größe der Spalten zu ändern und sie in neue Zeilen zu verschieben, wenn sie nicht passen. Hier ist der Code, der alles erklärt:

.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));

Was ich nun vermeiden möchte, ist, nur eine (einzelne) Spalte in eine neue Zeile zu verschieben. Stattdessen wird es früher ausgeblendet und die beiden Spalten werden zusammen verschoben.

Um es intuitiver zu erklären, ist Folgendes akzeptabel:

█ █ █ █

Außerdem:

█ █ █

██

Außerdem:

██

██

Das ist inakzeptabel:

█ █ █

█

Ich möchte hier unnötige Medienanfragen vermeiden. Das ist mein Code: https://jsfiddle.net/tucado/0czokyxa/3/

Answer 1

如果有人遇到同样的问题，这里是解决方案：https://jsfiddle.net/ tucado/0czokyxa/5/

和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;
  }

谢谢@Temani-Afif