Bagaimana untuk memusatkan baris terakhir item dalam grid menggunakan Tailwind CSS?

Question

Saya menghadapi masalah cuba menggunakan Tailwind (menggunakan React) untuk menjajarkan projek akhir saya dalam reka letak grid. Pada asasnya saya mahu 3 item dan jika tiada 3 item lagi iaitu 2 atau 1, saya mahu ia dipusatkan.

Saya mencuba beberapa jenis col span tetapi ia tidak berfungsi seperti yang diharapkan.

Untuk menggambarkan dengan lebih baik apa yang saya cuba lakukan, saya telah melampirkan beberapa rajah

Susun atur semasa:

Susun atur yang diingini dengan baki 2 item:

Susun atur yang diingini, tinggal 1 item:

 //cards .map(item)

            

Answer 1

Anda boleh pertimbangkan untuk menggunakannyaflex、flex-wrap、justify-center

7 item:

<div class="flex flex-wrap justify-center gap-2">
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
</div>

Keluaran:

8 item:

<div class="flex flex-wrap justify-center gap-2">
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
</div>

Gunakan Taman Permainan tailwind-css