638 posts
  • Has been part of the Envato Community for over 3 years
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
ChapterThemes says


The problem is you can’t proper create nested rows and columns with this… ?
What do you mean by that? Could you be more specific? I don’t know what you mean by “proper” and “nested”.

I’m trying to create a fluid grid with fixed gutters. Well there are several ways to achieve that like you’re showing in the example.

But now when using nested rows, it goes wrong.

For example put a 3 row column INSIDE a half column..

The fluid bootstrap grid can do nested columns, but then the nested columns get a different gutter in between, which i don’t want.

1878 posts YOU TOUCH IT YOU BUY IT
  • Has referred 200+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+6 more
FRESHFACE says



The problem is you can’t proper create nested rows and columns with this… ?
What do you mean by that? Could you be more specific? I don’t know what you mean by “proper” and “nested”.

I’m trying to create a fluid grid with fixed gutters. Well there are several ways to achieve that like you’re showing in the example.

But now when using nested rows, it goes wrong.

For example put a 3 row column INSIDE a half column..

The fluid bootstrap grid can do nested columns, but then the nested columns get a different gutter in between, which i don’t want.

Sry, I don’t follow :) Why are you talking about rows? Grid systems are columns only, rows are for tables. Please change my jsfiddle to show the problem, save it and post it here showing me what is wrong in your opinion, then I can try to help.

173 posts
  • Has been part of the Envato Community for over 2 years
  • Has sold $100+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
kungfu-themes says
From what I understand he’s trying to nest columns http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

For example, first divide the page into two 1/2 width columns. Then say divide one of the 1/2 width columns again into two, thereby nesting the columns.

But wouldn’t it be easier to do 1/4 + 1/4 + 1/2? The spacing would be perfect.

Unless I’m missing something?

638 posts
  • Has been part of the Envato Community for over 3 years
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
ChapterThemes says

Kung-fu is right. And for example the bootstrap gridsystem has rows and columns. Every set of columns are defined in a row container. Then like kungfu said, you can also create nested rows with colums. But with fluid grids, the gutter space between nested colums are smaller than between not-nested columns.

If you want to create for example 2 columns. And in the left column first normal content and then inside that left column 2 nested columns or more. Then you have a 1/2 + 1/2. And inside the left 1/2 you have a 1/1 and beneath that a 1/2 +1/2.

Now this is posible with the fluid grid of bootstrap. Only i don’t like the different sized gutters between nested and not-nested columns :)

1878 posts YOU TOUCH IT YOU BUY IT
  • Has referred 200+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+6 more
FRESHFACE says

Thanks kung-fu, that really cleared it up for me :) I always do my own grids so I am not really familiar with the terminology from bootstrap etc.

Such nesting is quite easy, you just need to wrap the nested columns in one more row (which has that negative margin). In this example I have renamed the old .container to .row to make it more easy to understand when re-used in nesting:

http://jsfiddle.net/qZ6tV/1/
173 posts
  • Has been part of the Envato Community for over 2 years
  • Has sold $100+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
kungfu-themes says

I have to say that is pretty nifty, but what happens if you have a variable amount of nested columns.

Would it still work. I didn’t look at it closely it may do.

638 posts
  • Has been part of the Envato Community for over 3 years
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
ChapterThemes says

@freshface rules! That is it! The negative margin part i finaly ‘see’ it. I was messing with it so much hahah :D

Very very nice!

Nesting works endlessly as far as i’ve seen!

1878 posts YOU TOUCH IT YOU BUY IT
  • Has referred 200+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+6 more
FRESHFACE says

@both

Yes, it’s endless / allows variable amount of nested columns :)

815 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Contributed a free file of the month
+3 more
rvision_ says

Thanks kung-fu, that really cleared it up for me :) I always do my own grids so I am not really familiar with the terminology from bootstrap etc.

Such nesting is quite easy, you just need to wrap the nested columns in one more row (which has that negative margin). In this example I have renamed the old .container to .row to make it more easy to understand when re-used in nesting:

http://jsfiddle.net/qZ6tV/1/

+1, negative margins rocks

by
by
by
by
by
by