Mega Panels is our new layout option for the Drupal Panels module. It's quick and flexible, allowing administrators to create layouts with multiple rows and a variable number of panels in each row.
Creating layouts with the Mega Panels layout
The power of Mega Panels is that if a pane has no content, an empty pane does not show up on the live page. This allows the other panes in the row to expand and fill all available space so there are no gaps. There are five rows available. The first and last row have a single full-width pane each. The middle three rows allow for up to four panes. If a row has no content in any of the panes, the row does not appear on the live page.
The Mega Panels skeleton view:
Using the Grow panes
In each of the three multi-pane rows, there are two Grow panes. Regular panes will all stay the same size, but Grow panes will stretch to fill any extra space. This allows administrators to create row layouts where one pane is wider than the others.
For a row with equal sized panes, leave the Grow panes empty. To create layouts where one pane is wider than the other, use a Grow pane.
Recommendation: Grow panes are best utilized when a row only has two panes - one Grow pane, and one regular pane. This creates a 3/1 or 1/3 row layout, depending on which Grow pane in the row has content.
Example Layouts
See examples of some of the possible layouts that can be created with Mega Panels.
How does Mega Panels work?
Have a look at the Biology IT Codepen demo to see the CSS and jQuery behind Mega Panels' flexibility.