Tailwind CSS を使用してグリッド内の項目の最後の行を中央に配置するにはどうすればよいですか?

Question

Tailwind を (React を使用して) 使用して最終プロジェクトをグリッド レイアウトに配置しようとすると問題が発生します。基本的には 3 つのアイテムが必要で、3 つのアイテムが残っていない場合、つまり 2 つまたは 1 つがある場合は、それらを中央に配置したいと考えています。

ある種の Col Span を試しましたが、期待どおりに機能しませんでした。

私がやろうとしていることをわかりやすく説明するために、いくつかの図を添付しました

現在のレイアウト:

残り 2 項目を含む希望のレイアウト:

残り 1 項目の希望のレイアウト:

<div className="xl:grid Grid-cols-3 Gap-4">
 //カード .map(item)
</div>

Answer 1

flex、flex-wrap、justify-center

の使用を検討できます。

7 アイテム:

リーリー ＃＃＃出力：

8 アイテム: リーリー

使用

tailwind-css プレイグラウンド