By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
446,276 Members | 1,951 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 446,276 IT Pros & Developers. It's quick & easy.

Writing a program that arranges articles in a three column grid

P: 1
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:

Expand|Select|Wrap|Line Numbers
  1. [
  2.   { "title": "Star Ocean review", "columns": 2 },
  3.   { "title": "Lego Star Wars review", "columns": 2 },
  4.   { "title": "Prison Architect review", "columns": 1 },
  5.   { "title": "Inside review", "columns": 1 },
  6.   { "title": "Umbrella Corps review", "columns": 2 }
  7. ]
  8.  



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:
Expand|Select|Wrap|Line Numbers
  1. [
  2.     { "title": "Star Ocean review", "columns": 2 },
  3.     { "title": "Lego Star Wars review", "columns": 2 },
  4.     { "title": "Prison Architect review", "columns": 1 },
  5.     { "title": "Inside review", "columns": 2 },
  6.     { "title": "Umbrella Corps review", "columns": 2 },
  7.     { "title": "Dino Dini's Kick Off review", "columns": 3 },
  8.     { "title": "Trials of the Dragon review", "columns": 1 },
  9.     { "title": "Mighty No. 9 review", "columns": 1 },
  10.     { "title": "Edge of Nowhere review", "columns": 2 },
  11.     { "title": "Guilty Gear Xrd Revelator review", "columns": 1 },
  12.     { "title": "Sherlock Holmes review", "columns": 2 },
  13.     { "title": "Mirror's Edge Catalyst review", "columns": 3 },
  14.     { "title": "Kirby: Planet Robobot review", "columns": 3 },
  15.     { "title": "Dangerous Golf review", "columns": 1 },
  16.     { "title": "Teenage Mutant Turtles review", "columns": 1 },
  17.     { "title": "The Warcraft movie review", "columns": 2 },
  18.     { "title": "Overwatch Review", "columns": 2 },
  19.     { "title": "The Witcher 3 review", "columns": 2 }
  20. ]
1 Week Ago #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.