When it comes to styling the layout of a page, Foundation 4's grid system with its mobile-first approach is a no-brainer, especially if you're already using other foundation elements like textual content, images, and sidebars.
On the example page below, each grey rectangle is created using grids and nested grids:
As a designer, I often work with "tabular data" consisting of elements and subelements, similar to the grey boxes shown in the previous image:
Some elements, such as controls, need to be aligned. Clicking on an element reveals a dropdown menu with more detailed information about the item.
During the mockup phase, I rely on the grid system to quickly achieve alignment and test different widths. However, when refining the design, the default behavior of the foundation grid can be limiting, creating excessive markup and making the HTML code difficult to read.
So my question is: Do you use the foundation grid for these types of design details? If not, what is your preferred method for aligning multiple elements on the same line with varying alignments and ensuring certain elements align with each other (e.g., simple divs with fixed widths, display: table, or something else)?
I am aware of the new CSS3 flexbox module, which allows for this type of display. However, it seems more like a replacement for the foundation grid system rather than a solution for styling these intricate design details.