我想讓下面的html使用css grid在n個相等的列中顯示row元素是否有兩個、三個或更多的子元素——Flexbox使這變得容易，但我無法使用css grid完成它——感謝任何幫助。

<div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

repeat(3，1fr)的常見答案不太正確。

這是因為1fr是關于可用(！)空間。一旦內容變得大于軌道大小，就會中斷。默認情況下，它不會溢出并相應地調整列寬。這就是為什么不是所有的1fr都保證等寬。1fr實際上只是minmax(auto，1fr)的簡稱。

如果您真的需要列寬完全相同，您應該使用:

grid-template-columns: repeat(3, minmax(0, 1fr));

minmax(0，1fr)允許柵格軌跡小到0，大到1fr，從而創建保持相等的列。但是，請注意，如果內容大于列或無法換行，這將導致溢出。

這里有一個例子來說明這種區別。

@Michael_B的回答差不多了。

.grid-container {
   display: grid;
   grid-auto-columns: 1fr;
   grid-auto-flow: column;
}

在編寫時，在Chrome、Firefox和Safari中給出一行大小相等的列。

在網格容器中定義它。設置三列等寬。

grid-template-columns: repeat(3, 1fr);

試試這個:

.grid-container {
   display: grid;
   grid-auto-columns: 1fr;
}

.grid-items {
   grid-row: 1;
}

否則，這里有一個可能有用的演示:jsFiddle

要了解fr單元，請查看以下帖子:

CSS網格有flex-grow功能嗎？ CSS網格布局中百分比和fr單位之間的差異 這允許列更好地分布，并且無論項目的大小是否調整，列都是相同的大小。

.row {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(33.33%, 1fr) );
}
.item {
  grid-column: span 1;
}

問題要求任意數量的列，而不是3列！所以用這個:

.grid-container {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
}
.grid-container > * {
  overflow: hidden;
}

這樣，其子節點(使用& quot& gt* & quot在css中)不需要任何特定的類，甚至不需要div。

例如:https://codepen.io/dimvai/pen/RwVbYyz

這個怎么樣？

.row {
  display: grid;
  grid-template-columns: repeat(3, calc(100% / 3));
}

全寬，帶響應包裝

在手機上縮小尺寸時，這些答案都不是全角的，也沒有換行。如果你想要類似bootstrap的東西，這可能就是你要找的東西。注意，200px是換行到新行的下限。

.grid-container {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

這里有一個簡單的答案(至少在我看來)。我得到了這個問題以上的答案沒有幫助我。這里的代碼將' div '分成相等的寬度和所需的列數。

//CSS

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto; // no of 'auto's will be number of columns here it's 3
}

//HTML
<div class="grid-container">
    <div></div>
    <div></div>
    <div></div>
</div>

更多關于網格的信息可以在這里看到W3Schools

這些答案都不適合我，所以我嘗試了另一種方法。在我的例子中，項目大小與內容有關。有些內容比其他的要大，所以所有的列不會相等。我只是用另一個100%寬和100%高的部門包裝了任何項目，并且工作正常。

<div class="row">
    <div style="width: 100%; height: 100%;">
      <div class="item"></div>
    </div>
    <div style="width: 100%; height: 100%;">
      <div class="item"></div>
    </div>
    <div style="width: 100%; height: 100%;">
      <div class="item"></div>
    </div>
</div>

這是為我工作，我希望能幫助你。