[英]How to create responsive grid layout in tailwind css?
我为桌面创建了一个网格布局,但对于移动设备,它是不同的。 下面是桌面版的照片
我使用以下代码创建了这个布局:
<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>
现在,问题是,当我切换到移动设备时,布局保持不变,但移动设备上的布局应该如下图所示
如何使用网格创建移动设备布局,如这张照片所示?
您必须用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>
您也可以使用网格,但在下面的代码中, 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 播放链接在这里
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.