Feb-19-2020, 10:55 PM
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...-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...-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 }
]
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...-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...-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 }
]
