Fluid nester columns: different margins than not nested is okay?

For a new project i’m playing with the bootstrap fluid containers and rows. One thing i noticed is when using nested rows the margins between the nested columns are smaller than between the columns in not-nested rows.

Ofcourse this is logical since the margins are percentages, but is the difference between those margins okay from a design perspective view?

Anyone?

It must be okay, because the fixes (hacks) and that’s what it would be (a hack) would probably break something along the way.

That’s why responsive design is by no means pixel perfect, when you resize your web browser.

kungfu-themes said
It must be okay, because the fixes (hacks) and that’s what it would be (a hack) would probably break something along the way. That’s why responsive design is by no means pixel perfect, when you resize your web browser.

Thanks.

But still i find this a strange desicion at the guys from twitter who made bootstrap. Because there are also fluid grids who still have fixed gutters. which is the best way i think.

Well i’ll go create my own bootstrap version!

This is all that i need from bootstrap:

.col1-4 {
  width: 25%;
}
.col1-3 {
  width: 33.33%;
}
.col1-2 {
  width: 50%;
}
.col2-3 {
  width: 66.34%;
}
.col3-4 {
  width: 75%;
}
.col1{
  width: 100%;
}
.col {
  float:left;
  display:block;
  padding:0 10px 100px;
  position:relative;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

And it works better, since you have fixed gutters.. You just have to give a negative margin to the container and you’re set!

Hey thanks!

I’ve also been playing to get a fluid grid with fixed gutters myself! I’ll have a look at this

@RubenBristian could you show me a small sample on how you use that with gutters and a container?

The problem is you can’t proper create nested rows and columns with this… ?

ChapterThemes said
@RubenBristian could you show me a small sample on how you use that with gutters and a container?

Something like this?

Try uncommenting the overflow:hidden on line 2 and press RUN. That’s what the negative margin is doing. Also try to resize your window -> fluid grid with fixed gutters.

ChapterThemes said
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”.