search

pure-css / pure

A set of small, responsive CSS modules that you can use in every web project.
http://purecss.io/
Other
23.61k stars 2.48k forks source link

visual incorect grid gutters #62

Closed xlnt-webdesign closed 11 years ago

xlnt-webdesign commented 11 years ago

The two grid-gutter solutions from http://purecss.io/grids/ ->Applying padding and borders to Grid units is visually incorrect to me. The content in the first pure-u-1-3 should be visually start aligned to the paragraphs content above or below. Same with the last pure-u-1-3. look at the red areas in the image to understand what I mean :-)

purecss-grid-gutters

Of cause I can adjust the ".pure-g > div" left and right paddings for the first, last and in betweens, but it is very tricky to still have them 1/3 content width.

I hope that purecss can solves this for me and not asking to override the paddings and width styles for an visually and mathematically correct appearance.

thank you for purecss daniel

tilomitra commented 11 years ago

@xlnt-webdesign Hey Daniel, I don't think I fully understand the issue. In that diagram, there is more space on the right-side of the last <div> because the word is wrapping to the next line (because of text-align: left). It has nothing to do with the grid.

Can you please try to explain the issue in more detail?

xlnt-webdesign commented 11 years ago

OK, I'll try again: What I mean has nothing to do with the word wrapping.

The padding is done with the div.l-box as suggested in the docs by option one: .l-box { padding: 1.3em; } this adds space to all grid units content within a group. For me the extra space on the right and left (red diagram areas) of the group shouldn't exist.

a 50% solution would be to give the most left div.pure-u-x-x a left-padding:0 and the most right an right-padding:0. BUT that makes the content within the grids unevenly divided between the units. In an 1/3 1/3 1/3 grid with 1em padding between the units this would make the middle 1/3 unit visually 2em smaller compared to the other.

If this doesn't help I'll make an example tomorrow ;-) daniel

tilomitra commented 11 years ago

Ah, I see what you're saying. This is something that you should handle as a developer though. You could have an .l-box-left, .l-box and an .l-box-right. The grids don't have any notion of margins or paddings.

ericf commented 11 years ago

@tilomitra can you get this fixed on the site so we can close out this issue?

tilomitra commented 11 years ago

@ericf I don't think theres anything that needs to be fixed here. Can you clarify?

ericf commented 11 years ago

Okay yeah, I guess there isn't anything to do…closing.