已实现Tailwind CSS桌面端网格布局，如何适配指定移动端样式？

我用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>

切换到移动端时布局未发生变化，需要调整为指定的移动端网格样式，请问如何用Grid实现？

利用Tailwind的响应式前缀即可区分桌面与移动端的网格配置，实现自适应布局：

修改后的代码 #

<!-- 默认移动端采用4列4行网格，桌面端恢复原有2行横向流式布局 -->
<div class="grid grid-cols-4 grid-rows-4 gap-1 ml-auto justify-center mt-2.5 md:grid-flow-col md:grid-rows-2">
    <img src="{{view url='images/icons/ic_mastercard.svg'}}" width="44" height="30" alt="mastercard" loading="lazy">
    <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 class="w-[44px] h-[30px] block md:hidden"></div>
</div>

关键调整说明 #

1. 移动端基础布局：默认（屏幕宽度<768px）设置grid-cols-4 grid-rows-4，将图标排列为4列4行的网格（可根据参考图需求修改grid-cols-*和grid-rows-*的数值，比如3列5行就改成grid-cols-3 grid-rows-5）。
2. 桌面端布局覆盖：通过md:grid-flow-col md:grid-rows-2，在屏幕宽度≥768px时恢复原有的2行横向流式布局。
3. 占位元素适配：原有的占位div改为仅移动端显示（block md:hidden），放在合适位置补全网格结构，避免布局错乱。

内容的提问来源于stack exchange，提问作者LosMos