Проблема стиля CSS3 - grid-template-columns с использованием Django

(включено изображение сайта) По сути, на моем сайте он отображает "Обзор тем", а также список тем с отступом, как будто это 3fr (это навигация, поэтому она должна быть слева), в то время как "2 комнаты доступны" и их содержимое отображаются под ними, но как 1fr. Похоже, я также допустил ошибку, когда он больше не показывает одну из двух комнат с содержимым, пытаясь исправить это, единственное, что было изменено, это маркеры <div>, раньше он отображал обе... X.X

{% extends 'main.html' %}

{% block content %}

<style>
    .home-container{
        display: grid;
        grid-template-columns: 1fr 3fr;
    }
</style>


<div class="home-container">

    <div>
        <h3>Browse Topics</h3>
        <hr>
        <div>
            <a href="{% url 'home' %}">All</a>
        </div>


        {% for topic in topics %}
            <div>
                <a href="{% url 'home' %}?q={{topic.name}}">{{topic.name}}</a>
            </div>
        {% endfor %}
    </div>
</div>

    <div>
        <h5>{{room_count}} rooms available</h5>
        <a href="{% url 'create-room' %}">Create Room</a>

        <div>
           {% for room in rooms %}
           <div>
               <a href="{% url 'update-room' room.id %}">Edit</a>
               <a href="{% url 'delete-room' room.id %}">Delete</a>
               <span>@{{room.host.username}}</span>
               <h5>{{room.id}} -- <a href="{% url 'room' room.id %}">{{room.name}}</a></h5>
               <small>{{room.topic.name}}</small>
               <hr>
           </div>
   
           {% endfor %}
       </div>
   
   </div>



</div>
    {% endblock content %}

Изображение веб-сайта

Начнем с того, что эти div, похоже, не синхронизированы. Они закрывают ваш домашний контейнер слишком рано. Попробуйте удалить последний .

        {% endfor %}
    </div>
</div>

Если вы просто поместите необработанный html, который вы предоставили, в файл .html и протестируете, это, похоже, будет вести себя так, как вы ожидаете, с темой в 1fr и комнатами в 3fr. Если просмотр тем все еще находится в регионе 3fr, возможно, вам нужно проверить ваш шаблон main.html, чтобы увидеть, не мешает ли что-то еще.

Начнем с того, что эти div, похоже, не синхронизированы. Они закрывают ваш домашний контейнер слишком рано. Попробуйте удалить последний .

        {% endfor %}
    </div>
</div>

Если вы просто поместите необработанный html, который вы предоставили, в .html файл и протестируете, это, похоже, будет вести себя так, как вы ожидаете, с темой в 1fr и комнатами в 3fr. Если просмотр тем все еще находится в регионе 3fr, возможно, вам нужно проверить ваш шаблон main.html, чтобы увидеть, не мешает ли что-то еще.

Редактирование после предоставления дополнительных файлов

<a href="{% url 'login' %}">Login<a/>

Видите закрывающий тег <a/> в файле navbar? Он все портит. Замените его на </a>

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