我有一個整潔的響應網格，就像這樣:

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

這使得每個網格項目至少有200像素寬。其中一個項目(紅色的)是兩倍寬，像這樣:

grid-column-end: span 2;

目前為止很棒！

現在，當我調整到一個小的寬度，紅色的項目迫使網格為兩列。這給了我一個奇怪的小列，盡管我指定最小寬度為200像素。看:

我真的希望紅色項目折疊成一個單獨的列，這樣網格就不會斷裂。

然而問題是，我不知道整個網格的寬度，所以我不能使用在特定視口大小觸發的mediaquery。

有沒有一種方法可以將紅色項強制放在一列，或者用另一種方式定義網格列來解決這個問題？

在使用grid時，你需要記住尺寸和一點數學知識。 如果你告訴一個項目跨越2列，那么這意味著你總是希望你的網格中至少有2列，如果屏幕變小，它不會變成1列網格。 現在你的網格的最小寬度是400像素。

對于那個奇怪大小的列，因為你有2列，第2列的最小寬度是200像素，之后的項目保持那個奇怪的大小。

您可以在該斷點處編寫一個媒體查詢，告訴您的項目1停留在列1中，這應該可以解決問題。

@media screen and (max-width:415px){
.item1 {
grid-column: 1;
background:red;
}
}

看看我在這里鏈接的代碼筆

參見Codepen上的

從CSS網格砌體的意義上來說，CSS網格幾乎做了我們想要的，我們可以用一點JS來幫助它，我有以下解決方案:

我們選擇網格中的最大列數和列的最小寬度。我們有任意數量的網格項，可以跨越1到我們的最大列數。

此示例最多使用4列，最小寬度為256像素。

HTML:

<div class="grid">
  <div class="w1"></div>
  <div class="w1"></div>
  <div class="w2"></div>
  <div class="w1"></div>
  <div class="w3"></div>
  <div class="w4"></div>
  ...
</div>

CSS:

.grid {
  display: grid;
}

.w1 {
  grid-column-end: span 1;
}
.w2 {
  grid-column-end: span 2;
}
.w3 {
  grid-column-end: span 3;
}
.w4 {
  grid-column-end: span 4;

JS:

// The minimum width in pixels for our columns
const colWidth = 256;
// The maximum number of columns in our grid
const maxCols = 4;

function resizeGrid() {
  const grid = document.getElementsByClassName("grid")[0];
  
  // Calculate the number of cols we can have by dividing the grid width by our colWidth.
  // This is the maximum number of cols we can have if they are all colWidth.
  const gridWidth = grid.getBoundingClientRect().width;
  let cols = Math.floor(gridWidth / colWidth);

  // Clamp this to our maxCols.
  cols = Math.min(maxCols, cols);

  // Set the number of cols in the grid
  grid.style.gridTemplateColumns = "repeat(" + cols + ", 1fr)";

  // Update grid-column spans limiting them to the number of cols we have.
  // We must do this as grid with an item that spans n columns will automatically have a default of n columns.
  for (let j = 1; j < maxCols + 1; j++) {
    for (const gridItem of grid.getElementsByClassName("w" + j)) {
      gridItem.style.gridColumnEnd = "span " + Math.min(j, cols);
    }
  }
}

window.addEventListener("resize", resizeGrid);
resizeGrid();

這是通過計算在給定最小寬度的情況下適合網格的列數來實現的。然后，我們將網格設置為具有該列數，并將項目限制為跨越最多列數。這具有基于網格寬度折疊列數的效果。

你可以在這個代碼筆中看到這一點。