CSS Gridの最後の行に要素を配置する方法は？私はこのようないくつかの項目をレイアウトするCSSグリッドを使用しています

Question

...

#container { 
 
    display: grid; 
 
    grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%; 
 
} 
 

 
.item { 
 
    background: teal; 
 
    color: white; 
 
    padding: 20px; 
 
    margin: 10px; 
 
}

<div id="container"> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
</div>

は、どのように私は最後の行が並ぶ中心の代わりに残されるために得ることができますか？アイテムの数を保証することはできませんので、任意の数のアイテムに対してレイアウトを正しく見せたいと思っています。

代わりにフレックスボックスを使用する必要がありますか？ CSSグリッドは適切な用途ですか？

Answer 1

最も簡単な解決策は、flexboxをjustify-content: centerとすることです。

これは、行の水平中央にあるすべてのアイテムをパックします。そして、あなたのマージンはそれらを押し離します。

justify-contentは、完全に塗りつぶされた行の場合、there's no free space for it to work以降は無効です。

空きスペースがある行（場合によっては最後の行のみ）でセンタリングが発生します。

#container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
} 
 

 
.item { 
 
    flex: 0 0 calc(16.66% - 20px); 
 
    background: teal; 
 
    color: white; 
 
    padding: 20px; 
 
    margin: 10px; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
}

<div id="container"> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
</div>

Answer 2

私はグリッドではあまり働かなかったが、フレックスボックスを使いたいかどうか分かっている限り、このコードを使用する。

#container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: row; 
 
} 
 

 
.item { 
 
    flex: 1; 
 
    flex-basis: 16.66%; 
 
    background: teal; 
 
    color: white; 
 
    padding: 20px; 
 
    margin: 10px; 
 
}

<div id="container"> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
</div>

便利な場合は感謝しています。そうでない場合は無視してください。

Answer 3

最後の行を前の行と異なる動作にするための特定のプロパティはありません。

nのアイテムがビューポートの幅内にあることに基づいて、Flexboxとそのjustify-contentプロパティを使用することができます。

centerに設定し、任意の数の項目の最後の行を中央に配置します。

スタックは、グリッドシステムの目的に反し

html, body { 
 
    margin: 0; 
 
} 
 

 
#container { 
 
    display: flex; 
 
    flex-wrap: wrap;     /* allow items to wrap */ 
 
    justify-content: center;   /* horizontally center items */ 
 
} 
 

 
.item { 
 
    flex-basis: calc(16.666% - 20px); /* subtract the margin from the width */ 
 
    background: teal; 
 
    color: white; 
 
    padding: 20px; 
 
    margin: 10px; 
 
    box-sizing: border-box;   /* make padding be included in the set width */ 
 
}

<div id="container"> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
</div>

Answer 4

スニペット。グリッドは、スプレッドシートのようにすべてがXとYの値を持つ2次元配列です。

はい、アイテムをラップするシステムが必要です。 Flexboxはflex-wrapのためにここに請求書に適合します。

#container { 
    padding: 10px; 
    width: calc((100px + (10px * 2)) * 4); /* item width + padding on either side times number of items */ 
    display: flex; 
    flex-wrap: wrap; 
    background: blue; 
    margin: 10px; 
} 

#container div { 
    width: 100px; 
    height: 100px; 
    flex-grow: 1; 
    background: red; 
    margin: 10px; 
} 

https://jsfiddle.net/0c0hzh8t/

これは、子どもたちは、行がいっぱいの場合Noneになりますと、それはその標準的な大きさになるだろう、すべての利用可能なスペースを占有できます。

コンテナのサイズを自動的に変更する場合は、widthプロパティを削除すると、コンテナとアイテムのサイズが自動的に変更されます。それだけでも、行の項目の量を定義すると仮定します。