daneden / Toast

🍞 A highly-customizable, responsive (S)CSS grid
http://daneden.github.io/Toast
MIT License
2k stars 271 forks source link

The purpose of -.25em? & best way to add gutter bottom? #50

Open jezthomp opened 8 years ago

jezthomp commented 8 years ago

What is the purpose of the margin right -.25em out of interest ?

Also the best way to add the same gutter below each column is to simply add it into..

.#{$toast-grid-column-namespace} { padding-bottom: $toast-gutter-width; }

Or is there another more intuitive method built in?

tdaym commented 6 years ago

What is the purpose of the margin right -.25em out of interest ?

Using "inline-block", it often becomes the problem that Gap is made on the right side when I use element {$toast-grid-column-namespace}. It can avoid using the negative-margin(margin-right: -.25em;). ex) https://css-tricks.com/fighting-the-space-between-inline-block-elements/

And I think that your idea is a good idea. In that case, how about that I add "negative-maegin-bottom" because the bottom element has Gap.

.#{$toast-grid-namespace} {
  list-style: none;
  margin-left: -$toast-gutter-width;
  margin-bottom: -$toast-gutter-width;
}
.#{$toast-grid-column-namespace} {
  box-sizing: border-box;
  display: inline-block;
  margin-right: -.25em;
  min-height: 1px;
  padding-left: $toast-gutter-width;
  vertical-align: top;
  padding-bottom: $toast-gutter-width;
}

or

.#{$toast-grid-namespace} {
  list-style: none;
  margin-left: -$toast-gutter-width;
  margin-top: -$toast-gutter-width;
}
.#{$toast-grid-column-namespace} {
  box-sizing: border-box;
  display: inline-block;
  margin-right: -.25em;
  min-height: 1px;
  padding-left: $toast-gutter-width;
  vertical-align: top;
  padding-top: $toast-gutter-width;
}