Expand Responsive Elements Outside of Grid System?

Question

I'm making a responsive website using Foundation 5. Everything is going smooth but one issue I'm having is, the PSD the designer sent me largely follows a 12 column grid which is great. However there are a few elements of the design that expand outside the grid to the far left or far right. Also on some "rows" there will be two elements positioned side by side but each element would take up 7 grid spaces each.

While it looks great in photoshop, coding this with a responsive grid is proving to be challenging. Does anyone have any ideas how to tackle this?

johnkavanagh johnkavanagh · Accepted Answer · 2014-02-18T11:53:59

I use two separate ways of approaching this type of layout:

Use negative margins to pull left/right.

For example if your element pulls out of the left-hand edge of the grid by 25px, you would use:

.element{
    margin-left: -25px
}

As long as you're using a fluid grid the elements within will flow to fill the space.

This is the easiest approach and one used very commonly in Bootstrap implementations so I don't foresee Foundation being much different (for full-disclosure: I've not used Foundation). if you're using measurement-values to pull outwards though you will need to ensure that these work down through the different viewports/media-queries.

Expand upon the grid.

This is probably most relevant where you mention you've got a 2x7 grid on the page. Where you've got something in the design that falls significantly outside of the grid you're using, then use a new class name and use that to modify how the grid behaves at that specific point in the page.

Remember that whatever the framework is you intend to use, it's only intended as a starting point: you should feel comfortable and confident in modifying and building on top of it to match your needs (and those of your designer!).

Expand Responsive Elements Outside of Grid System?

1 Answers