I wanted to format my columns like this:
| TEXT | TEXT | TEXT | TEXT | BLANK | BLANK |
so I implemented it in the following way:
<div class="row">
<div class="columns medium-4 large-2">TEXT</div>
<div class="columns medium-4 large-2">TEXT</div>
<div class="columns medium-4 large-2">TEXT</div>
<div class="columns medium-4 large-2">TEXT</div>
</div>
However, the last column is shifted to the right:
| TEXT | TEXT | TEXT | BLANK | BLANK | TEXT |
To avoid this issue, should I insert two additional blank columns within the row? It does solve the problem, but I am not in favor of adding unnecessary empty elements. Even just one extra blank div prevents the right float.
<div class="row">
<div class="columns medium-4 large-2">TEXT</div>
<div class="columns medium-4 large-2">TEXT</div>
<div class="columns medium-4 large-2">TEXT</div>
<div class="columns medium-4 large-2">TEXT</div>
<div></div>
</div>
Is there a more optimal solution for this issue?