Got stuck in 'grid-template-columns' in CSS-CodePudding

I am currently learning Django and got stuck. I have created 3 divs inside of an home container and written this CSS code for the home container ->

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

I have created grid-template-columns: 1fr 3fr 1fr; but I am not getting a column for the third div(i.e. 1fr). The third div's content is coming below the second div.

Here is the whole source code. ->

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


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

CodePudding user response：

The problem lies in your markup, you're forgetting to close a div before your third section resulting in only two children of .home-container with the second child holding sections 2 & 3:

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


<div >
  <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>
  <div>
    <h3>Recent Activity</h3>
    <hr>
    <div>
      {% for message in messages %}

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

CodePudding user response：

I think it's caused by the non-closed <div> tag openened just before the rooms loop. Put a </div> after {% endfor %} and your grid template should work fine.