在 Jeet.gs 中打破 col() 和 span() 的边界

Question

向使用 jeet.gs 中的 span() 或 col() 布局的元素添加边框会导致每个元素对于父容器而言太宽。

有办法解决这个问题吗？

codepen 中的一些示例。

<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

Answer 1

嗯，这是因为那些 div 有一个标准的盒子模型，并且边框宽度不包括在宽度 (33.(3)%) 中。如果你给他们 box-sizing: border-box 一切都会好的。

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