Susy grid and context

Question

i don't find clear explanation about using context with the mixin @include span-columns(); so i don't find differences between @include span-columns(4 , $tablet); and @include span-columns(4); but i think it's an issue for me because columns doesn't take place for the full width of their parent container like this :

in this example, the second column should use 8 col instead of 4 actually. Am i on the right way ? Do i need to use context properly ?

thanks

Answer 1

Since Susy grids are relative, the width of the parent is used to calculate the width of the children. Put simply: 4/4 = 100%, 4/8 = 50%, 4/4 != 4/8. Think of the first number in the fraction as the columns you want to span, and then second number as the columns available (the width of the parent, or the context).

Looking at your demo linked from another question, and your screenshot, you are in a context of 8 for the tablet view, and 12 for the desktop view. That means span-columns(2, 8) for left bar on tablet becomes span-columns(4, 12) on desktop. And span-columns(6 omega, 8) for the main content becomes span-columns(8 omega, 12) for the right. The omega is important on the last item in a row.

Also, you need to remove the padding you set on both objects, or use box-sizing: border-box. By default, browsers add padding to width, and so your grid items are becoming up too wide for the space. I recommend setting border-box globally.