CODEWITHSUNDEEP
cssstylusjeet-grid
aaaaargZombies
aaaaargZombies

Reputation: 103

Borders breaking col() and span() in Jeet.gs

Adding a border to an element which is layed out using span() or col() from jeet.gs causes each element to be too wide for the parent container.

Is there a way to fix this?

some examples in codepen.

http://codepen.io/aaaaargZombies/pen/yybYMZ

http://codepen.io/aaaaargZombies/pen/WbjQpK

<section>
  <div>block1</div>
  <div>block2</div>
  <div>block3</div>
  <div>block4</div>
  <div>block5</div>
  <div>block6</div>
</section>

edit()

section
  center(800px)
  text-align: center
div
  span(1/3, cycle: 3)
  margin-top: 5px
  margin-bottom: 5px

edit()

section
  center(800px)
  text-align: center
div
  span(1/3, cycle: 3)
  margin-top: 5px
  margin-bottom: 5px
  border 1px dashed red

Upvotes: 0

Views: 643

Answers (1)

Panya
Panya

Reputation: 2699

Well, it's because those divs have a standard box model, and border width don't included in the width (33.(3)%). If you give them box-sizing: border-box all will be fine.

Upvotes: 2

Related Questions