Использование CSS Grid в шаблоне Django

В моем HTML есть контейнер div, который отображает список из 10 разобранных заголовков из The Toronto Star. Я хочу иметь возможность отображать их в повторяющейся сетке, которая выглядит следующим образом:

Here's the example image ( I can't add images since I dont have 10 reputation yet )

Вот шаблон django, который у меня есть :

<div id="container">
<div class="containers">
    {% for n, i in toronto %}
    <center><img src="{{i}}"></center>
    <h3>{{n}}</h3>
    {% endfor %}
</div>

Чтобы пояснить, я прошу кого-то, кто имеет опыт работы с CSS Grids и django, помочь мне с соответствующим кодом css, похожим на картинку, на которую я ссылался выше. Css сетка должна быть повторяющейся, так как шаблон django содержит 10 индексов в списке

Попробовать

<div id="container">
{% for n, i in toronto %}
<div class="containers">
    <center><img src="{{i}}"></center>
    <h3>{{n}}</h3>
</div>
{% endfor %}
</div>

Класс тоже должен быть разобран

Вернуться на верх