+- 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: Homepage Article Grid (/thread-24566.html)
Homepage Article Grid - JedBoyle - Feb-19-2020
Hi
I have been tasked to code a homepage in a three-column grid format.
Articles that appear in the homepage grid can be given a layout value which determines how many columns they take up. Articles can be one-column, two-column, or three-column.
Each of the columns is 300 pixels wide, giving a total grid width of 900 pixels.
https://i.ibb.co/FYbRWJ0/Screenshot-2020-02-13-at-17-41-50.png
There is a problem with adopting this grid format: depending on the layout values assigned to each article, the grid may end up having gaps. For example, the following article configuration creates the following layout:
[
{ "title": "Star Ocean review", "columns": 2 },
{ "title": "Lego Star Wars review", "columns": 2 },
{ "title": "Prison Architect review", "columns": 1 },
{ "title": "Inside review", "columns": 1 },
{ "title": "Umbrella Corps review", "columns": 2 }
]
https://i.ibb.co/fD1v4H9/Screenshot-2020-02-15-at-10-57-57.png
As you can see from the above illustration, this article configuration creates a layout that has a gap in the third column of the first row.
Given the following article configuration, I need to write a piece of code that adjusts the layout so that it contains as few gaps as possible.
The final output should be rendered as an HTML document.
Article configuration:
[
{ "title": "Star Ocean review", "columns": 2 },
{ "title": "Lego Star Wars review", "columns": 2 },
{ "title": "Prison Architect review", "columns": 1 },
{ "title": "Inside review", "columns": 2 },
{ "title": "Umbrella Corps review", "columns": 2 },
{ "title": "Dino Dini's Kick Off review", "columns": 3 },
{ "title": "Trials of the Dragon review", "columns": 1 },
{ "title": "Mighty No. 9 review", "columns": 1 },
{ "title": "Edge of Nowhere review", "columns": 2 },
{ "title": "Guilty Gear Xrd Revelator review", "columns": 1 },
{ "title": "Sherlock Holmes review", "columns": 2 },
{ "title": "Mirror's Edge Catalyst review", "columns": 3 },
{ "title": "Kirby: Planet Robobot review", "columns": 3 },
{ "title": "Dangerous Golf review", "columns": 1 },
{ "title": "Teenage Mutant Turtles review", "columns": 1 },
{ "title": "The Warcraft movie review", "columns": 2 },
{ "title": "Overwatch Review", "columns": 2 },
{ "title": "The Witcher 3 review", "columns": 2 }
]
RE: Homepage Article Grid - Larz60+ - Feb-20-2020
some reading:
https://www.w3schools.com/css/css3_multiple_columns.asp
https://getbootstrap.com/docs/4.0/layout/grid/
I'd also take a look at:
https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world