CSS Grid not working with form

Question

I have the following html:

<div class="grid">
        <div>
            {% for entry in entries %} <!--django code-->
                {{ entry.reason }}
                {{ entry.comments }}
                    <form action="upvote" method="POST">
                        {% csrf_token %}
                        {{ entry.upvotes }}
                        <input type="hidden" name="id" value="{{ entry.id }}">
                        <button id="upvote" type="submit">Upvote</button>
                    </form>
            {% endfor %}
        </div>

        <div>
            <h2>Submit a Reason:</h2>
            <form method="POST" name="entry"  action="submission">
                {% csrf_token %}
                <textarea name = "entry" rows="4" cols="50" >

                </textarea>
                <button type="submit">Submit</button>
            </form>
        </div>
    </div>

and css:

.grid{
    display:grid;
    grid-template-columns: 3fr 1fr;
}
.grid > div{
    border: 1px solid black;
}

but it is not applying the grid: http://jsfiddle.net/v8Lmukq6/3/ . Thanks for any help I am not sure what the problem is as I changed the inner divs to:

<div class='grid'> 
<div>Item 1</div> 
<div>Item 2</div>
</div>

and the grid worked fine.