[Answer]-Make a div-row collapse in html/css/django

The divs have no defined width. They will take up the entire page such that there is no horizontal room left. What you want is a responsive design that changes that width based on the size of the boxes, and the size of the screen.

Using the @media selector to limit a specific style to the size of the current browser window will allow the size of the divs to respond as you desire:

@media screen and (max-width : 600px) {
   .box {
      width: 50%;

   }
}
@media screen and (min-width : 601px) {
   .box {
      width: 33.3%;
   }
}

JS Fiddle

Hope that helps!

EDIT: Having read your comments I now see what you mean. Saying collapse confused me and I assumed you were asking for something dynamic.

The best way to solve this is to prioritise columns over rows. It’s not a true table so they aren’t even rows exactly.

<div class="column">
    <div class="row">
        <h3>Drinks</h3>
        <ul><li>item 1</li><li>item 2</li></ul>
    </div>
    <div class="row">
        <h3>Food</h3>
        <ul><li>item 1</li><li>item 2</li></ul>
    </div>
</div>
<div class="column">
    <div class="row">
        <h3>Pet</h3>
        <ul><li>item 1</li></ul>
    </div>
    <div class="row">
        <h3>Test</h3>
        <ul><li>item 1</li><li>item 2</li></ul>
    </div>
</div>

Using the following CSS will give the desired result.

.column {
    width:50%;
    float:left;
}

Using your code this would equate to:

{% for category in categories %}
    <div class="column">
        <div class="row">
            <h3>{{ category }}</h3>
            <ul> {% for elem in elems %}<li><a href=...> {{ elem }}</a></li>{% endfor %}</ul>
        </div>
    </div>
{% endfor %}

This answer has gotten quite long, I apologise!

New JS FIddle