CSS网格无法与表单一起使用

Question

我有以下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>

和CSS：

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

但未应用网格：http://jsfiddle.net/v8Lmukq6/3/。感谢您的帮助，我不确定将内部div更改为以下问题是什么？

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

并且网格工作正常。