Arrange my looped template data in rows - Printable Version +- Python Forum (https://python-forum.io) +-- Forum: Python Coding (https://python-forum.io/forum-7.html) +--- Forum: General Coding Help (https://python-forum.io/forum-8.html) +--- Thread: Arrange my looped template data in rows (/thread-24555.html) |
Arrange my looped template data in rows - JedBoyle - Feb-19-2020 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-02-19-at-13-39-43.png Can anyone help me write a conditional statement in python that will order the blocks so there are no gaps? |