Menu icon Foundation
Push-pull - ordering things in grids

Hey folks - I'm trying to order 5 divs in a simple grid like so:

3-up at large: with large-4 on all 5 blocks:

[ block 1 ] [ block 2 ] [ block 3 ]
[ block 4 ] [ block 5 ]

Note: added a pull-4 to block 5 column class to get it to position next to 4, instead of under 3

2-up at medium: with medium-6 on all 5 blocks:

[ block 1 ] [ block 2 ]
[ block 3 ] [ block 4 ]
--> [ block 5 ]

Note: now with the pull-4 on the last div, block 5 is shifted over a bit and not aligning under blocks 1 and 3. I tried putting a pull-6 on block 5 and that works for medium, but going back up to large block 5 is now overlapping block 4.

1-up at small: With small-12 on all 5 blocks:

[ block 1 ]
[ block 2 ]
[ block 3 ]
[ block 4 ]
[ block 5 ]

Note: small-12 works no matter if I have pushes or pulls added.

It's so close but I'm struggling with getting the pulls to work per default breakpoint.
Any suggestions?

pushpullFoundation Gridcolumn alignment

Hey folks - I'm trying to order 5 divs in a simple grid like so:

3-up at large: with large-4 on all 5 blocks:

[ block 1 ] [ block 2 ] [ block 3 ]
[ block 4 ] [ block 5 ]

Note: added a pull-4 to block 5 column class to get it to position next to 4, instead of under 3

2-up at medium: with medium-6 on all 5 blocks:

[ block 1 ] [ block 2 ]
[ block 3 ] [ block 4 ]
--> [ block 5 ]

Note: now with the pull-4 on the last div, block 5 is shifted over a bit and not aligning under blocks 1 and 3. I tried putting a pull-6 on block 5 and that works for medium, but going back up to large block 5 is now overlapping block 4.

1-up at small: With small-12 on all 5 blocks:

[ block 1 ]
[ block 2 ]
[ block 3 ]
[ block 4 ]
[ block 5 ]

Note: small-12 works no matter if I have pushes or pulls added.

It's so close but I'm struggling with getting the pulls to work per default breakpoint.
Any suggestions?

Karl Ward over 5 years ago

Basically, you are trying to align 5 blocks into a 6-column grid. First of all, you should be using -offset class instead of pull- or -push classes, basically because you want to fill the empty space with an offset ...

... However, are you sure you should not be building that layout with the block grid instead?
http://foundation.zurb.com/docs/components/block_grid.html