Zurb green grid moves last column to left

Question

I am trying to find a good way to use a grid without hacking it at all.

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

Usually the answer was to do one small-4and then a small-8, but since 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 this only works for elements that need to be moved to the right.

small-4Right now, with two divs, the right div is floating to the right, which means that it does not match the previous one. I could add additional small-4, but I would like to get acquainted with recommendations on this issue.

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 base will be the floatlast column on the right by default:

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

Incomplete lines

To get around various rounding options for browsers, the Foundation will place the last column in a row to the right to align the edges. [...]

:

1. .end class ^{( 5.0.3)}

[...] , 12 , end, .

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

, .end 5.0.3, , global .end , 5.1.0.

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

:

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

- v5.0.3, :

2. .left

.left , :

(v5.0.3).

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

3.

, Zurb Foundation :

(v5.0.3).

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

- :

(v5.0.3).

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

---

4.

, *-pull-#/*-push-# .

small-pull-4 , :

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

. ( Foundation 5.0.3)

. Foundation 4 pull-4. . .

. ( Foundation 4.1.6)

Answer 2

div (, ) "small-4 columns"