zurb/foundation — Issue #203: Two-grid on mobile?
Author: olach
Created: 2012-01-03 09:41:13+00:00
State: open

What is the proper way to have a two-column grid on mobile?

On desktop I have a footer with six small blocks stacked horizontally.
(class="two columns")
☐ ☐ ☐ ☐ ☐ ☐

On mobile these blocks automatically stacks vertically with full width.
☐
☐
☐
☐
☐
☐

But I want to have these six blocks stacked on mobile in a two-column.
(class="two phone-two columns")
☐ ☐
☐ ☐
☐ ☐

Using the phone-two class to the items stacks them up like this, but they don't line up nicely because of a left margin.

I solved this by adding the following css-code to foundation.css:

.row .phone-two.column:nth-child(2n+1),
.row .phone-two.columns:nth-child(2n+1) {
margin-left: 0;
}

Is there another more proper way to solve this or should we add this kind of css-code to foundation.css?