卡在 CSS 中的gridtemplatecolumns中

<style type="text/css">
  .home-container {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
  }
</style>


<div class="home-container">
  <div>
    <h3>Browse Topics</h3>
    <hr>
    <a href="{% url 'home' %}">All</a> {% for topic in topics %}
    <div>
      <a href="{% url 'home' %}?q={{topic.name}} ">{{topic.name}}</a>
    </div>
    {% endfor %}
  </div>

  <div>
    {% if room_count != 0 %}
    <h5>{{room_count}} rooms available.</h5>
    {% else %}
    <h5>No rooms available.</h5>
    {% endif %}

    <a href="{% url 'create-room' %}">Create Room</a>

    <div>
      {% for room in rooms %}
      <div>
        {% if request.user == room.host %}
        <a href="{% url 'update-room' room.id %}">Edit this room</a>
        <a href="{% url 'delete-room' room.id %}">Delete this room</a> {% endif %}
      </div>
      <div>
        <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>
      <h3>Recent Activity</h3>
      <hr>
      <div>
        {% for message in messages %}

        <small>@{{ message.user }}   {{ message.created|timesince }} ago</small> {% endfor %}
      </div>
    </div>
  </div>