Arrange my looped template data in rows

[JedBoyle]

Hello

I have Django set up to take in data from the admin. I have looped the data using template tags and template variables:

[html]
{% if Articles %}
<div class="container">
{% for col in Articles %}
<div class="item">
<h1>{{ col.title }}</h1><br><br>
<p>Columns:
{{col.columns}}</p>
</div>
{% endfor %}
</div>
{% endif %}
[/html]

each article in my database has a title and a column size. When it is looped ad displayed I have written some Jquery to target the value of the column size of each article (1 to 3) and style it:

[jquery]
<script>
$("document").ready(function () {
$(".item:contains('1')").css("width", "300");
$(".item:contains('2')").css("width", "600");
$(".item:contains('3')").css("width", "900");
})
</script>
[/jquery]

Here is my CSS:

[css]
body {
font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
text-align: center;
}

.container {
width: 900px;
border-radius: 0.5em;
padding: 10px;
display:grid;
justify-content: center;
align-content: center;


}

.item {
height: 300px;
background-color: rgba(41, 74, 111, 0.3);
border: 2px solid rgba(26, 28, 185, 0.5);
text-align: center;
float: left;


}

.item p {
margin-top: 0;
display: inline-block;
vertical-align: middle;

}

.item h1 {
font-size: 18px;
margin-top: 120px;
display: inline-block;
vertical-align: middle;
}

[/css]

This is what I want to achieve:



This is what I have:

https://i.ibb.co/2qLmCXM/Screenshot-2020...-39-43.png


Can anyone help me write a conditional statement in python that will order the blocks so there are no gaps?