如何在 tailwind css 中創建響應式網格布局？

Question

我為桌面創建了一個網格布局，但對於移動設備，它是不同的。 下面是桌面版的照片

我使用以下代碼創建了這個布局：

 <div class="grid grid-flow-col grid-rows-2 gap-1 ml-auto justify-center mt-2.5">
            <img src="{{view url='images/icons/ic_mastercard.svg'}}" width="44" height="30" alt="mastercard" loading="lazy">
            <div class="w-[44px] h-[30px] hidden md:block"></div>
            <img src="{{view url='images/icons/ic_maestro-white-bg.svg'}}" width="44" height="30" alt="mastercard" loading="lazy">
            <img src="{{view url='images/icons/ic_gb.svg'}}" width="44" height="30" alt="GB" loading="lazy">
            <img src="{{view url='images/icons/ic_visa.svg'}}" width="44" height="30" alt="visa" loading="lazy">
            <img src="{{view url='images/icons/ic_bancontact-white-bg.svg'}}" width="44" height="30" alt="Bancontact" loading="lazy">
            <img src="{{view url='images/icons/ic_american-ex.svg'}}" width="44" height="30" alt="american exprerss" loading="lazy">
            <img src="{{view url='images/icons/ic_eps-white-bg.svg'}}" width="44" height="30" alt="EPS" loading="lazy">
            <img src="{{view url='images/icons/ic_paypal.svg'}}" width="44" height="30" alt="paypal" loading="lazy">
            <img src="{{view url='images/icons/ic_multibanco-white-bg.svg'}}" width="44" height="30" alt="Multibanco" loading="lazy">
            <img src="{{view url='images/icons/ic_klarna-pink-bg.svg'}}" width="44" height="30" alt="klarna" loading="lazy">
            <img src="{{view url='images/icons/ic_giropay-white-bg.svg'}}" width="44" height="30" alt="Giropay" loading="lazy">
            <img src="{{view url='images/icons/ic_gpay-white-bg.svg'}}" width="44" height="30" alt="google pay" loading="lazy">
            <img src="{{view url='images/icons/ic_alipay-white-bg.svg'}}" width="44" height="30" alt="Alipay" loading="lazy">
            <img src="{{view url='images/icons/ic_applepay-white-bg.svg'}}" width="44" height="30" alt="apple pay" loading="lazy">
            <img src="{{view url='images/icons/sofort.svg'}}" width="44" height="30" alt="Sofort" loading="lazy">
    </div>

現在，問題是，當我切換到移動設備時，布局保持不變，但移動設備上的布局應該如下圖所示

如何使用網格創建移動設備布局，如這張照片所示？

Answer 1

您必須用flex和flex-wrap屬性替換grid布局以獲得所需的行為。

---

試試下面的代碼：

<div class="mx-auto mt-2.5 flex w-96 flex-wrap items-center justify-center gap-1">
  <img src="{{view url='images/icons/ic_mastercard.svg'}}" width="44" height="30" alt="mastercard" loading="lazy" />
  <div class="hidden h-[30px] w-[44px] md:block"></div>
  <img src="{{view url='images/icons/ic_maestro-white-bg.svg'}}" width="44" height="30" alt="mastercard" loading="lazy" />
  <img src="{{view url='images/icons/ic_gb.svg'}}" width="44" height="30" alt="GB" loading="lazy" />
  <img src="{{view url='images/icons/ic_visa.svg'}}" width="44" height="30" alt="visa" loading="lazy" />
  <img src="{{view url='images/icons/ic_bancontact-white-bg.svg'}}" width="44" height="30" alt="Bancontact" loading="lazy" />
  <img src="{{view url='images/icons/ic_american-ex.svg'}}" width="44" height="30" alt="american exprerss" loading="lazy" />
  <img src="{{view url='images/icons/ic_eps-white-bg.svg'}}" width="44" height="30" alt="EPS" loading="lazy" />
  <img src="{{view url='images/icons/ic_paypal.svg'}}" width="44" height="30" alt="paypal" loading="lazy" />
  <img src="{{view url='images/icons/ic_multibanco-white-bg.svg'}}" width="44" height="30" alt="Multibanco" loading="lazy" />
  <img src="{{view url='images/icons/ic_klarna-pink-bg.svg'}}" width="44" height="30" alt="klarna" loading="lazy" />
  <img src="{{view url='images/icons/ic_giropay-white-bg.svg'}}" width="44" height="30" alt="Giropay" loading="lazy" />
  <img src="{{view url='images/icons/ic_gpay-white-bg.svg'}}" width="44" height="30" alt="google pay" loading="lazy" />
  <img src="{{view url='images/icons/ic_alipay-white-bg.svg'}}" width="44" height="30" alt="Alipay" loading="lazy" />
  <img src="{{view url='images/icons/ic_applepay-white-bg.svg'}}" width="44" height="30" alt="apple pay" loading="lazy" />
  <img src="{{view url='images/icons/sofort.svg'}}" width="44" height="30" alt="Sofort" loading="lazy" />
</div>

Answer 2

您也可以使用網格，但在下面的代碼中， grid將始終以 5x3 矩陣顯示（因為我們有 15 張圖像）。

 <script src="https://cdn.tailwindcss.com"></script> <div class="grid grid-flow-col grid-rows-3 sm:grid-rows-2 gap-1 ml-auto justify-center mt-2.5"> <img src="https://dummyimage.com/720x400" width="44" height="30" alt="mastercard" loading="lazy"> <div class="w-[44px] h-[30px] hidden sm:block"></div> <img src="https://dummyimage.com/720x400" width="44" height="30" alt="mastercard" loading="lazy"> <img src="https://dummyimage.com/720x400" width="44" height="30" alt="GB" loading="lazy"> <img src="https://dummyimage.com/720x400" width="44" height="30" alt="visa" loading="lazy"> <img src="https://dummyimage.com/720x400" width="44" height="30" alt="Bancontact" loading="lazy"> <img src="https://dummyimage.com/720x400" width="44" height="30" alt="american exprerss" loading="lazy"> <img src="https://dummyimage.com/720x400" width="44" height="30" alt="EPS" loading="lazy"> <img src="https://dummyimage.com/720x400" width="44" height="30" alt="paypal" loading="lazy"> <img src="https://dummyimage.com/720x400" width="44" height="30" alt="Multibanco" loading="lazy"> <img src="https://dummyimage.com/720x400" width="44" height="30" alt="klarna" loading="lazy"> <img src="https://dummyimage.com/720x400" width="44" height="30" alt="Giropay" loading="lazy"> <img src="https://dummyimage.com/720x400" width="44" height="30" alt="google pay" loading="lazy"> <img src="https://dummyimage.com/720x400" width="44" height="30" alt="Alipay" loading="lazy"> <img src="https://dummyimage.com/720x400" width="44" height="30" alt="apple pay" loading="lazy"> <img src="https://dummyimage.com/720x400" width="44" height="30" alt="Sofort" loading="lazy" class=""> </div>

Tailwind 播放鏈接在這里