search

nathansmith / unsemantic

Fluid grid for mobile, tablet, and desktop.
http://unsemantic.com
MIT License
1.38k stars 161 forks source link

Gutter between divs are not working #59

Closed Franklin-vaz closed 8 years ago

Franklin-vaz commented 10 years ago

@nathansmith Please help me, i am trying to create a responsive layout using your unsemantic fluid framework. I am finding it difficult to have gutters between 2 divs. Here is my code: capture

and my output is capture1

I don know where i am going wrong. Please help me. I desperately need a solution for this. :(

amboy00 commented 10 years ago

The spacing used are padding, not margins. So you won't see any spacing between the divs if you apply a background on them. You can nest another element that would have a background value and get your gutter appearance.

Check out the demo and see how the .grid-xx divs are just used for layout and not styling. http://unsemantic.com/demo-responsive

nathansmith commented 10 years ago

Yep, what he said. Think of the grid units as the "skeleton."

Don't apply visual styling directly to the grid units themselves. Put some meat on the bones, and then add the styling there.

You'll basically need to do this…

<div class="grid-container">
  <div class="grid-50">
    <div class="post">
      ...
    </div>
  </div>
  <div class="grid-50">
    <div class="post2">
      ...
    </div>
  </div>
</div>
Franklin-vaz commented 10 years ago

@nathansmith @amboy00 Thank you so much for helping me with my issue! It helped. This may a silly question to you guys, but i am just a beginner to responsive grid system. So please bare this.

I shall come back if i have any further doubts in future!