CODEWITHSUNDEEP
susy-sass
PeterB
PeterB

Reputation: 2330

Inset fluid grids with Susy

I have been able to replicate the following grid layout using math: static without issues. However, I'd prefer to use fluid widths, so the design shrinks on smaller screens before changing at the next breakpoint.

As it should be

When I switch to math: fluid and try to inset the rows, using either margin-left or padding-left, the % widths shrink and the grid no longer correctly aligned - and the sizing of each block differs.

enter image description here

Is this possible to do with a fluid grid? It doesn't seem possible with percentages, but what about other units? I was surprised margin/padding made a difference to the % width, as using box-sizing: border-box I assumed they were inside the 'seen' size.

A demo for the issue is at http://sassmeister.com/gist/83526e7319203138ace1

Thanks!

Upvotes: 1

Views: 62

Answers (1)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

Yes, this is possible. You current issue comes from a misunderstanding of context in Susy. No matter what box-sizing you use, % widths are relative to available space. If you remove space (with margins or padding on a parent element), you need to pass that new context along to the children. So your blocks are not all in the same context, and none are in the full root context of 13 columns that you are passing in right now.

There would be various ways for you to achieve your layout, but I forked your sassmeister gist to show how I might do it. In my solution, the top row has 2.5-column margins on either side, leaving a context of 8 columns. The bottom row has 1-column margins on either side, leaving a context of 11 columns.

Upvotes: 2

Related Questions