アイテムの数が不明で、左に水平に積み上げてほしい
アイテム間の固定ギャップが欲しい
アイテムの幅は不明であり、バリエーションがある可能性があります
私はflex以下のように使用できることを知っていますが、これがで達成可能かどうかを知りたいgridです。
#box {
display: flex;
width: 300px;
outline: 1px solid blue;
}
.item {
background: gray;
width: 50px;
height: 100px;
}
#box > * + * {
margin-left: 10px;
}<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>親の幅の値を増やして、私が何をしようとしているのかを明確に表示します-子は親の幅全体を占めるべきではありません（もちろん子が多い場合を除く）。
ここに。私はあなたの例と同じメジャーとサイズを使用しました。
子供の幅に依存します
#box {
display: inline-grid;
grid-auto-flow: column;
grid-template-columns: auto;
grid-auto-rows: 100px;
column-gap: 10px;
outline: 1px solid blue;
}
.item {
background: gray;
width: 50px;
}<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>親の幅に依存します
#box {
display: grid;
grid-auto-flow: column;
grid-template-columns: auto;
grid-auto-rows: 100px;
column-gap: 10px;
outline: 1px solid blue;
width: 230px;
}
.item {
background: gray;
}<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>更新しました
親のサイズは幅100％で、子の数は不定です。
#box {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, 50px);
grid-auto-rows: 100px;
column-gap: 10px;
outline: 1px solid blue;
}
.item {
background: gray;
}<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>これで、あなたのケースはで解決できることがわかりましたが、gridを使用することをお勧めしますflex。gridこのタスクに使用することは、ハンマーでネジを打つようなものです。目標を達成することはできますが、間違ったツールを使用します。Grid列の数がわかっていると、売りのパターンが異常なテーブルに役立ちます。そしてFlex、あなたの場合のように、要素のリストにもっと役立ちます。Flex古く、その後、よりネイティブでGrid、すべての最新ブラウザでたくさんより安定に動作します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加