Как создать адаптивную сетку в 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>

Теперь проблема в том, что когда я переключаюсь на мобильный, макет остается прежним, но вместо этого макет на мобильном устройстве должен быть таким, как на фото ниже.

Как я могу создать макет для мобильных устройств, как показано на этом фото, используя сетку?

Пожалуйста, опубликуйте минимальный воспроизводимый пример

— 16.01.2023 09:35

вы используете класс grid-rows-2, поэтому он не может расширяться до 3 строк, поэтому либо установите grid-rows-3 md:grid-rows-2, либо используйте flexbox, как предложил Кришна

— 16.01.2023 09:56

html css grid tailwind-css

16.01.2023 09:35

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы должны заменить макет grid на свойства flex и flex-wrap для желаемого поведения.

Попробуйте следующий код:

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

16.01.2023 09:40

Вы также можете использовать сетку, но в приведенном ниже коде 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 Play здесь

Я уже пробовал, но проблема в том, что в мобильном представлении в последней строке мне нужно, чтобы изображения были центрированы. Используя сетку и 3 ряда, изображения равномерно размещаются в каждом ряду в мобильном представлении.

— 18.01.2023 11:24

16.01.2023 11:22