Zurb Foundation grid move the last column to left

Question

I'm trying to figure out a good way to utilize the grid without hacking it at all.

What I want to do is a three wide grid (aka small-4 on each) in the top row and then the second row I want the columns to match up but only with two small-4 elements.

Typically the answer would be to do one small-4 and then a small-8 but because the inputs are set to width: 100% this will not work for me.

Is there any way to do this out of the box? I know about offset but that only works for items set to move to the right.

At the moment with two small-4 divs the right div floats right meaning it doesn't line up with the one above. I could add an extra small-4 but I'd like to follow best practices on this.

Here is my code so you can see what I mean:

<div class="row">
    <div class="small-4 columns">
        <input type="text" />
    </div>
    <div class="small-4 columns">
        <input type="text" />
    </div>
    <div class="small-4 columns">
        <input type="text" />
    </div>
</div>
<div class="row">
    <div class="small-4 columns">
        <input type="text" />
    </div>
    <div class="small-4 columns">
        <input type="text" />
    </div>
</div>

Answer 1

Zurb foundation will float the last column to the right by default:

[class*="column"]+[class*="column"]:last-child { /* Taken from foundation.css */
  float: right;
}

Incomplete Rows

In order to work around browsers' different rounding behaviors, Foundation will float the last column in a row to the right so the edge aligns. [...]

There are couple of methods to override that and move the last column to the left:

1. Using .end class ^{(It is buggy in version 5.0.3)}

[...] If your row doesn't have a count that adds up to 12 columns, you can tag the last column with a class of end in order to override that behavior.

<div class="row">
    <div class="small-4 columns"> ... </div>
    <div class="small-4 columns end"> ... </div>
</div>

Although .end is expected to work in version 5.0.3 as well, but it doesn't work properly because another global .end class will override that. However it is fixed since version 5.1.0.

Example (v4.1.6) • Example (v5.0.3) (buggy) • Example (v5.1.0)

Related issues can be found here:

• https://github.com/zurb/foundation/issues/4215
• https://github.com/zurb/foundation/issues/4223
• https://github.com/zurb/foundation/pull/4183 [FIXED: by removing global classes]

If for any reason you're using v5.0.3, there are some alternatives:

2. Using .left class

One option would be to use .left utility class on the last column to float it to the left:

Example Here (v5.0.3).

<div class="row">
    <div class="small-4 columns"> ... </div>
    <div class="small-4 columns left"> ... </div>
</div>

3. Overriding the default style

Another option could be to override the default style of Zurb foundation as follows:

Example Here (v5.0.3).

.columns.end { float: left !important; }

Or something like:

Example Here (v5.0.3).

[class*="column"]+[class*="column"]:last-child {
  float: left;
}

---

4. Using source ordering classes

Generally you could use *-pull-#/*-push-# source ordering classes to move a column to a side.

In this case, you should use small-pull-4 for the second column at the second row, as follows:

<div class="row">
    <div class="small-4 columns"> ... </div>
    <div class="small-4 small-pull-4 columns"> ... </div>
</div>

WORKING DEMO. (Using Foundation 5.0.3)

Note: For Foundation 4, you should use pull-4 class instead. Take a look at the source ordering section at the doc. But this will only work on large displays.

UPDATED DEMO. (Using Foundation 4.1.6)