Tailwind CSS と React を使用してアプリを構築していますが、ビューの 1 つにカードのグリッドがあります。現在は次のようになります:
ご覧のとおり、ウィンドウを縮小すると、カードがウィンドウに押し込まれます。カードのサイズ (幅と高さ) が常に同じになるようにし、ウィンドウが小さくなってカードの数が 1 つの行に収まらなくなった場合は、次の行に移動するようにしたいと考えています。
類似品 (MS ペイントで作成):
画面が小さくなっても、カードのサイズは固定 (同じアスペクト比) のままです。
現在のコードは次のようになります:
＃＃＃グリッド：＃＃＃ リーリー ＃＃＃カード：＃＃＃ リーリー tailwind-cssを使用して設定する方法をご存知ですか?
P粉0984172232024-03-27 18:30:06
Grid を使用して設定したいと考えていることはわかりますが、残念ながら、Grid はその用途に適したツールではありません。 Flexbox はあなたのニーズに最適です。 これは、必要な出力 を表示する 追い風プレイグラウンドです。私がリンクしたプレイグラウンドは、例のように NextJS を使用しません。したがって、NextJS 固有のものではないため、画像などのいくつかを修正しました。
スタイルにいくつかの変更を加えました。より効果的だと思います。つまり、幅の設定を画像からコンテナの div に移動しました。要件に応じてこの設定をさらに変更できます。
あなたのセットアップでは、コードは大まかに次のように変換されます。
リーリー次のようになります:
サイズとラッピングが変更される正確なカットオフ ポイントは、実装方法によって異なります。上記の点に満足できない場合は、必要に応じて lg、md プレフィックスを変更するだけです。