Dynamically determining arrangement of a layout

A tangible, non-transitory machine readable medium storing a program which when executed by at least one processing unit rearranges a content layout, the program comprising sets of instructions for:

• receiving, for a first display width, a first content layout comprising content elements arranged across a first number of vertical layout sections, each first vertical layout section having a same first section width, wherein the first content layout defines a first margin width on either side of the layout and a first gutter width between each first vertical layout section, wherein the content elements are displayed, and wherein the first number of vertical layout sections are not displayed;
• identifying a second display width for a second content layout;
• determining a ratio of the second display width to the first display width;
• based at least in part on the ratio, determining a second gutter width, a second margin width, and a second number of vertical layout sections that span the second display width for the second content layout, wherein the second number of vertical layout sections are not displayed;
• determining a size and placement of a representation of the content elements in the second content layout based upon the second gutter width, the second margin width, and the second number of vertical layout sections;
• generating the second content layout based upon the second gutter width, second margin width, and the size and placement of the representation of the content elements;
• and
• presenting the second content layout at a display having the second display width.

A hardware electronic device comprising:

• a set of processing units;
• and
• a tangible, non-transitory machine readable medium storing instructions executed by at least one processing unit of the set of processing units to rearrange a content layout, the instructions comprising:
• receiving, for a first display width, a first content layout comprising content elements arranged across a first number of vertical layout sections, each first vertical layout section having a same first section width, wherein the first content layout defines a first margin width on either side of the layout and a first gutter width between each first vertical layout section, wherein the content elements are displayed, and wherein the first number of vertical layout sections are not displayed;
• identifying a second display width for a second content layout;
• determining a ratio of the second display width to the first display width;
• based at least in part on the ratio, determining a second gutter width, a second margin width, and a second number of vertical layout sections that span the second display width for the second content layout, wherein the second number of vertical layout sections are not displayed;
• determining a size and placement of a representation of the content elements in the second content layout based upon the second gutter width, the second margin width, and the second number of vertical layout sections;
• generating the second content layout based upon the second gutter width, second margin width, and the size and placement of the representation of the content elements;
• and
• presenting the second content layout at a display having the second display width.