Problem with nested column with different column length?

[kirangsa]

Hi Guys,

I have t implement a complex grid system to my website. The main Grid is 12 column

$susy: (
global-box-sizing:border-box,
columns: 12,
gutters: .25,
use-custom:(rem:true)
);

This 12 column is divided in two Column respectively 6 5,
And inside 6 i have 4 equal Column , In 5 i have a (3,2,1) grids respectively .

so how i can implement this ?

I have tried @include layout(6 1/4 inside-static fluid);
but its not taking the gutter space

[zellwk]

This should help you understand how to do it.

http://www.zell-weekeat.com/context-with-susy/

On Tue, 11 Nov 2014 at 3:49 am Kiran notifications@github.com wrote:

Hi Guys,

I have t implement a complex grid system to my website. The main Grid is
12 column

$susy: (
global-box-sizing:border-box,
columns: 12,
gutters: .25,
use-custom:(rem:true)
);

This 12 column is divided in two Column respectively 6 5,
And inside 6 i have 4 equal Column , In 5 i have a (3,2,1) grids
respectively .

so how i can implement this ?

I have tried @include https://github.com/include layout(6 1/4
inside-static fluid);
but its not taking the gutter space

—
Reply to this email directly or view it on GitHub
#403.

[kirangsa]

Hi Zellwk,
Thanks for the replay i read the article but it didn't help me ,
I tried to implement @nested but nothing is working. The inner columns not taking the gutter space.
I need to apply a different gutter width for nested grids.

I tried @include layout(auto 12 before 0.25 fluid);
but the 0.25 gutter space is not taking.

Could you help me on this?

[zellwk]

try using @include nested((gutters: 0.25)).

I prefer to use a map within the span for instances like this rather than using the shorthand, but that's just me personally. Let me know if it works for you

[mirisuzanne]

Susy isn't able to parse 12 before .25 and understand what the .25 refers to. Try auto 12 .25 before fluid. The columns and gutters currently have to be declared side-by-side, columns first. That may be something we could improve. You can also use the map approach, like @zellwk.

[kirangsa]

Thanks zellwk & ericam,

It doesn't work. I have tried the map method also
$VisitorSourceMarketTable: (
columns: 19,
gutters: 1/19,
math: fluid,
output: float,
gutter-position: after,
);

.VisitorSourceMarketTable{
@include layout($VisitorSourceMarketTable);
.left-Country{
@include span(3 of 19);
}
}

It not taking the gutter space this 19 column layout is inside a 12 column layout.
Is this will be problem?

And Its division math is working fine. But the gutter space are culminate at last. and its not used

[mirisuzanne]

@kirangsa I'm not sure I understand what you are actually trying to do, and what's happening instead.

One common mistake is to assume that the background debug image will change anywhere you set a new layout. That doesn't happen unless you specifically call it for each grid you want.

But when I look at your initial example, the gutters setting was being changed from .25 to 1/4, which is exactly the same thing - so no change at all. Maybe the change is from the default after to inside-static? If that needs to override previous output (at a breakpoint, for example) it won't automatically remove the gutters that were previously applied.

So there are various issues you might be running into, but from what you've posted so far it's very hard to know where to look.

[kirangsa]

Dear eric,
i am so sorry. What actually happening is am working on project around 20 pages. The mock up was buld with out following any grid. So each Part(Header, Body, Footer) i am forced to create different layout. This is first time am using susy.

Default Susy Settings is:
$susy: (
global-box-sizing:border-box,
columns: 12,
gutters: 1/12,
output: float,
math: fluid,
gutter-position: after,
use-custom:(rem:true)
);

In header part i am using @include layout(15 inside fluid no-gutters);
And in body part @include layout(auto 12 before 0.25 fluid);
And Inner Dashboard
$VisitorSourceMarketTable: (
columns: 19,
gutters: 1/19,
math: fluid,
output: float,
gutter-position: after,
);

I am facing lot of problem because of less knowledge about susy.

[mirisuzanne]

I can see right away that @include layout(auto 12 before 0.25 fluid); needs to be @include layout(auto 12 0.25 before fluid); instead (columns and gutters have to be side-by-side). Other than that, I'd need more details to comment. Sounds like you're diving straight into the most advanced settings! :)

[kirangsa]

Please help me on this where am messing up.

[zellwk]

@kirangsa Take a look at what Eric just said and try implementing it:

I can see right away that @include layout(auto 12 before 0.25 fluid); needs to be @include layout(auto 12 0.25 before fluid); instead (columns and gutters have to be side-by-side). Other than that, I'd need more details to comment. Sounds like you're diving straight into the most advanced settings! :)

You NEED to have the columns and gutters side-by-side.

You might want to put it up on Sassmeister so we could help debug easily if all else fails. Try to only pick out parts of your code so that its easy for us to find out whats wrong if you do so. (remove all the random height, background, float, overflow and other statements)

[kirangsa]

Hi Zellwk This are my susy implimention

This is my base page style

@import 'susy';

$susy: (
global-box-sizing:border-box,
columns: 12,
gutters: 1/12,
output: float,
math: fluid,
gutter-position: after,
use-custom:(rem:true)
);
//debug:(image: show)

.headerWrap {
@include layout(15 inside fluid no-gutters);
@include span(full);

.left {
    @include span(5 of 15);     
    }       

.center {
    @include span(5 of 15);

}
.right {
    @include span(5 of 15 last);        
}

}

Inner Body 1

$VisitorSourceMarketTable: (
columns: 18,
gutters: 1/18,
math: fluid,
output: float,
gutter-position: after,
);

.VisitorSourceMarketTable{

@include layout($VisitorSourceMarketTable);
.left-Country{
@include span(3 of 18);
}

.total-visitors{
@include span(2 of 18);
}

.visitor-category{
@include span(6 of 18)
}

.Purpose-of-Visit{
@include span(5 of 18)
}

.LoS{
@include span(2 of 18)
}
}

TopCountrySource {
@include with-layout(10) {
@include span(full);
}
.grid1-10 {
@include span(1 of 10);
@include border-box-sizing;
}
}

/* Grow Visitor Trend */
.growVisitorTred {
@include with-layout(12 1/4 before fluid) {
.left {
@include span(8);
}
.right {
@include span(4);
}
}
}