左右の隙間を均等にして左から順番に要素を並べたい

Question

実現したいこと

以下画像のように左右の余白を均等にして、左から順番に並ぶようにしたいです。

前提

青枠はウィンドウ幅を意味します。
赤枠は並べたい要素を意味します。

利用者のウィンドウ幅によって例1のように右に隙間が大きい状態になる事があります。

該当のソースコード

https://stackblitz.com/edit/stackblitz-starters-utp53hgw?file=app%2Fpage.tsx

試したこと

例2のように justify-between を利用して隙間を均等に分割しましたが、3段目の隙間も均等になった結果、1,2 段目とズレてしまっています。
)

補足情報（FW/ツールのバージョンなど）

• tailwindcss 4.2.0

Comments

[yambejp]

横4列は固定なのでしょうか？幅を広げたときに5個、6個と増やしたいのでしょうか？
逆に中のコンテンツは幅を指定できるのでしょうか？

[vj2a6wk5]

> 横4列は固定なのでしょうか？幅を広げたときに5個、6個と増やしたいのでしょうか？
はい、ウィドウ幅が広がると横に並ぶ要素数が増えて、ウィンドウ幅が狭くなると横に並ぶ要素数が減るようにしたいです。

> 逆に中のコンテンツは幅を指定できるのでしょうか？
はい。中のコンテンツは w-1 などを指定して固定できます。
ウィンドウ幅が次第では要素幅も長くなり見づらいので最大幅などは max-w-1 などを必ず指定する予定です。

[yambejp]

調整しました。確認してみてください

Answer 1

flexというよりgridですかね

参考

<style>
.wrap{
justify-content: center;
display:grid;
padding:10px;
gap:10px;
border:solid 1px blue;
grid-template-areas:
"a a a a";
}
.wrap div{
width:200px;
border:solid 1px red;
}
</style>
<div class="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
</div>

調整

画像幅固定でブラウザの幅で列数を可変に

<style>
.wrap{
justify-content: center;
display:grid;
padding:20px;
gap:20px;
border:solid 1px blue;
grid-template-columns:repeat(auto-fit, minmax(200px,0px));
}
.wrap div{
width:200px;
border:solid 1px red;
}
</style>
<div class="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
</div>

Comments

[vj2a6wk5]

Bootstrap時代の浅い理解のままでgridは12個の要素が横に並ぶものと思い込んでしまっていました。
「grid」と「grid-template-columns:repeat(auto-fit, minmax(200px,0px));」がキモですね！

tailwindでも実現できました。
https://play.tailwindcss.com/jLbWNNZNeB

ありがとうございました！