web-dev-qa-db-ja.com

CSSグリッドの等幅列

Cssグリッドを使用して行要素に2つ、3つ、またはそれ以上の子要素があるかどうかにかかわらず、以下のHTMLをn個の等しい列に表示したい-Flexbox cssグリッドを使用して完了します-任意の助けをいただければ幸いです。

<div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
htmlcsscss3gridcss-grid
12
user1678736

これをグリッドコンテナで定義します。等幅の3列を設定します。

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

@Michael_Bの答えはほとんどそこにあります。

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

執筆時点で、Chrome、Firefox、Safariに同じサイズの列が1行表示されます。

13
wegry

これを試して：

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

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

それ以外の場合は、役に立つかもしれないデモがあります： jsFiddle

frユニットについては、次の投稿をご覧ください。

7
Michael_B

これにより、列の分散が改善され、アイテムのサイズが調整されない場合でも列のサイズは同じになります。

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