Hello, can anyone help me code this?
“The Homepage Grid”
Background
I am designing 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 are 300 pixels wide, giving a total grid width of 900 pixels.
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:
As you can see from the above illustration, this article configuration creates a layout which has a gap in the third column of the first row. Oh no!
Given the following article configuration, write a piece of code which adjusts the layout so that it contains as few gaps as possible.
Your solution can be implemented either server-side or client-side, and the final output should be rendered as an HTML document.
In your README, explain your approach along with any downsides to your solution.
Article configuration:
“The Homepage Grid”
Background
I am designing 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 are 300 pixels wide, giving a total grid width of 900 pixels.
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:
Code:
[
{ "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 }
]
As you can see from the above illustration, this article configuration creates a layout which has a gap in the third column of the first row. Oh no!
Given the following article configuration, write a piece of code which adjusts the layout so that it contains as few gaps as possible.
Your solution can be implemented either server-side or client-side, and the final output should be rendered as an HTML document.
In your README, explain your approach along with any downsides to your solution.
Article configuration:
Code:
[
{ "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 }
]