CSS Grid не работает в динамически создаваемых элементах с шаблонизацией Django jinja?

Я новичок в Django и столкнулся с этой проблемой. В общем, я делаю приложение, в котором мне нужно отображать комнаты на главной странице. Номера генерируются динамически и хранятся в базе данных, которые извлекаются для главной страницы следующим образом (в файле views.py)

def home(request):
    return render(request, 'base/index.html', {'rooms':rooms})

затем index.html будет отображать данные в виде карточек, используя jinja for loop, что-то вроде этого, просто игнорируйте классы и все такое, это просто фиктивные изображения, здесь я использую tailwind-css для стилизации

Я использую tailwindcss для стилизации, и сетка отображения, кажется, не работает с этим, я добавил grid-cols-4 для больших экранов, что означает 4 колонки по 1 fr, так что 4 div могут быть размещены в одной строке, но только 1 размещается, а остальные просто переходят в другую строку. (красные границы предназначены для устранения неполадок) enter image description here

В моем понимании, применяемый css не способен обнаружить динамически генерируемый набор данных, и учитывает только 1 карту.

Наконец, вопрос Как исправить это и сделать так, чтобы 3-4 динамически генерируемых элемента сетки были в одну строку?

Возможно, проблема в позиции, где вы разместили цикл, измените код следующим образом, чтобы цикл работал внутри сетки

Я думаю, что вы допустили ошибку при вызове цикла. Я не знаю, как работает Django, но вы должны вызывать цикл после первого div. Так что псевдокод может выглядеть следующим образом

<div class="grid grid-cols-1 md:grid-cols-3 border-4  lg:grid-cols-4 sm:grid-cols-2 gap-10">
  <!-- call loop here or use something like "map function" equivalent in django-->
 

  <div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
    .
    .
    .
  </div>

 <!-- call ends here -->
</div>

Ниже я добавляю код tailwindcss, так как я не могу применить цикл здесь, поэтому я просто копирую-вставляю код 4 карт повторно

Вернуться на верх