Как центрировать элементы в последнем ряду сетки с помощью Tailwind CSS?

Возникли проблемы с попыткой выровнять мои окончательные элементы в макете сетки с помощью Tailwind (с React). В основном мне нужно 3 элемента поперек, а там, где не осталось 3 элементов, то есть 2 или 1, я хочу, чтобы они были центрированы.

Я пробовал какой-то col span, но не работал должным образом.

Чтобы лучше проиллюстрировать, что я пытаюсь сделать, я прикрепил несколько диаграмм.

Текущий макет:

Желаемый макет, где осталось 2 элемента:

Желаемый макет, где остался 1 элемент:

<div className = "xl:grid grid-cols-3 gap-4">
 //cards .map(item) 
</div>

javascript html css reactjs tailwind-css

31.03.2023 07:41

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

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

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

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

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

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

140

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

Ответы 1

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

Вы можете использовать flex, flex-wrap, justify-center

7 предметов:

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

Выход:

8 предметов:

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

Поиграйте с площадкой tailwind-css

Мои мысли тоже! Если у вас есть некоторые расчеты и «произвольные значения», такие как w-[calc(33.333%_-_4px)] aspect-square после точного gap-[4px] , вы даже можете получить настройку с квадратными элементами. - Сетка для ситуации OP будет очень сложной, потому что самый сложный крайний случай на самом деле уже не сетка.

— 31.03.2023 07:56

@ Jeroen, я согласен с тобой, я хотел, чтобы это было просто, поэтому не включал w-[calc(33.333%_-_4px)], это отличный и идеальный подход к его проблеме.

— 31.03.2023 07:58

отредактировал мои комментарии, так как возникла проблема, когда у меня есть 3 разных изображения для карточек (повторяющихся для каждого имени), но каждое изображение на самом деле имеет разный размер, установив точное значение w для изображения (а не w-full), а затем добавив w- 60, исправляет мою проблему. Calc также работал, однако столкнулся с проблемами с размером карточек, где содержимое не было одинаковым.

— 31.03.2023 08:25

31.03.2023 07:53