ホームページ  >  に質問  >  本文

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

<p>Tailwind を (React を使用して) 使用して最終プロジェクトをグリッド レイアウトに配置しようとすると問題が発生します。基本的には 3 つのアイテムが必要で、3 つのアイテムが残っていない場合、つまり 2 つまたは 1 つがある場合は、それらを中央に配置したいと考えています。 </p> <p>ある種の Col Span を試しましたが、期待どおりに機能しませんでした。 </p> <p>私がやろうとしていることをわかりやすく説明するために、いくつかの図を添付しました</p> <p>現在のレイアウト: </p> <p>残り 2 項目を含む希望のレイアウト: </p> <p>残り 1 項目の希望のレイアウト: </p> <pre class="brush:html;toolbar:false;"><div className="xl:grid Grid-cols-3 Gap-4"> //カード .map(item) </div> </pre></p>
P粉311563823P粉311563823442日前455

全員に返信(1)返信します

  • P粉187677012

    P粉1876770122023-08-29 10:26:21

    flexflex-wrapjustify-center

    の使用を検討できます。

    7 アイテム:

    リーリー ###出力:

    8 アイテム: リーリー

    使用

    tailwind-css プレイグラウンド

    返事
    0
  • キャンセル返事