Bleeding out of grid container, full width of window

[jerseycheese]

Is this possible?

For example, say I have an image in a grid container, in a column that is 12 columns wide (in a 12 column wide layout that has a max-width).

Is it possible with bleed() or any other way to pull the column/image out of the flow so that it stretches out left/right over the grid container, and making it the entire width of the browser window?

Thanks in advance.

[jerseycheese]

Example: like the full-width photos seen here: http://www.thedailybeast.com/newsweek/2013/07/10/photosphere.html#7d3d4af7-2ea1-4577-90c9-5460606dd8d1

[mirisuzanne]

You can bleed as much as you like, so yes. I have used 100% or 200% to bleed out past both the container and the window. But there is no way to know how much bleed to use, if you want the exact viewport width. Which raises the general rule: if you have to override something, you probably applied it too broadly in the first place.

Given that: I find it much easier and more reliable to have multiple containers - applying a max-width to only the content you do want contained, rather than containing everything, and then bleeding some elements out from there.

Susy doesn't care how many containers you use - or if you use any at all. The container is nothing more than a max-width and a clearfix. You can apply that liberally, as needed.

[jerseycheese]

Thanks, that makes sense. I guess I will set containers on a per-row basis on pages where I need this kind of thing to happen, where the "row" I want to go full width like this, I will just not use a grid at all.

[mirisuzanne]

If you want, you can use Susy outside a container context as well. Relative widths will simply expand to fit the viewport. The grids outside the container and inside will only line up when the viewport and container are identical, but it means you can continue to use span-columns and the other layout tools as needed - even for the full-screen sections.