Как я могу сделать столбец Tailwind полной ширины, если это единственный столбец в строке

У меня есть сетка, которая охватывает 2 столбца в строке.

const items = [1,2,3,4,5,6]

...

<ul className = "grid grid-cols-2 gap-8 mt-16 justify-items-center">
{
    items.map(item =>
        <li className = "text-center max-w-sm" key = {item.name}>
        {item.name}
        </li>
    )
}
</ul>

С 6 элементами сетка идеально выравнивается, по 2 элемента в строке. Но если я добавлю дополнительный элемент, новый элемент будет добавлен в новую строку, но ограничен одним столбцом.

Я пытаюсь найти способ разместить элемент в своем собственном диапазоне строк в обоих столбцах. Возможно ли это с помощью tailwind/css или потребуется дополнительный JS для расчета, должна ли строка охватывать.

reactjs tailwind-css

17.03.2022 18:57

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

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

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

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

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

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

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

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

Ответы 1

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

Я не могу придумать автоматический способ для классов сетки справиться с этим случаем, но ниже приведено решение JavaScript. По сути, он проверяет, находится ли последний элемент массива в списке нечетной длины, и добавляет col-span-2.

items.map((item, i) => {
  const spanClass = (i === items.length - 1) && (items.length % 2) ? 'col-span-2' : '';
  return (
    <li className=`${spanClass} text-center max-w-sm` key = {item.name}>
      {item.name}
    </li>
  )
})

жаль, что в настоящее время это невозможно без js. Но спасибо за включение js-решения. Отмечено как правильное :)

— 18.03.2022 14:04

17.03.2022 19:45