Question

如何在网格中的每个项目之间获得均匀的边框？我做了一个网格布局示例，请看下面。 PS！它响应迅速，可以使用不同的屏幕宽度。

问题1： 我无法将border: 2px solid #fff;添加到每个项目，否则会使项目之间的边框加倍。我甚至需要项目之间的边界和整个事物。

问题2：边框添加了width，这会弄乱整个事情。我真的必须使用 2x以上的DOM元素（添加子divs）还是有更好的方法？

html {
  background: #000;
}
.wrapper {
  width: 100%;
  height: 900px;
}
.item {
  width: 50%;
  padding-bottom: 50%;
  float: left;
}
@media screen and (min-width: 500px) {
  .item {
     width: 33.3%;
     padding-bottom: 33.3%;
  }
}
@media screen and (min-width: 900px) {
  .item {
     width: 25%;
     padding-bottom: 25%;
  }
}


.one {
  background: #E65B60;
}
.two {
  background: #8873E3;
}
.three {
  background: #5BE67B;
}
.four {
  background: #E4E65B;
}
.five {
  background: #E6975B;
}
.six {
  background: #5BE6BD;
}
.seven {
  background: #C862E1;
}
.eight {
  background: #444;
}

<div class="wrapper">
  <div class="item one"></div>
  <div class="item two"></div>
  <div class="item three"></div>
  <div class="item four"></div>
  <div class="item five"></div>
  <div class="item six"></div>
  <div class="item seven"></div>
  <div class="item eight"></div>
</div>

Answer 1

您可以设置box-sizing: border-box;，以便包装器和项目在宽度计算中包含边框宽度。然后，您可以为项目添加底部和右侧边框，并为包装器添加顶部和左侧边框。

＆＃13;

html {
  background: #000;
}
.wrapper {
  width: 100%;
  /* height: 900px; */
  overflow: hidden;
  border: 0 solid white;
  border-width: 1px 0 0 1px;
  box-sizing: border-box;
}
.item {
  width: 50%;
  padding-bottom: 50%;
  float: left;
  border: inherit;
  border-width: 0 1px 1px 0;
  box-sizing: border-box;
}
@media screen and (min-width: 500px) {
  .item {
     width: 33.333%;
     padding-bottom: 33.333%;
  }
}
@media screen and (min-width: 900px) {
  .item {
     width: 25%;
     padding-bottom: 25%;
  }
}


.one {
  background: #E65B60;
}
.two {
  background: #8873E3;
}
.three {
  background: #5BE67B;
}
.four {
  background: #E4E65B;
}
.five {
  background: #E6975B;
}
.six {
  background: #5BE6BD;
}
.seven {
  background: #C862E1;
}
.eight {
  background: #444;
}

＆＃13;

<div class="wrapper">
  <div class="item one"></div>
  <div class="item two"></div>
  <div class="item three"></div>
  <div class="item four"></div>
  <div class="item five"></div>
  <div class="item six"></div>
  <div class="item seven"></div>
  <div class="item eight"></div>
</div>

＆＃13;

Answer 2

您可以使用

box-sizing:border-box;以
开头      容器两侧的
padding
     在元素的另外两个方面
border

结束background-clip: content-box以查看边框并在框内包含背景色。

最终，可以使用display:flex;，因此它为子项提供了一个Block Formating Context

带有BFC的孩子可以使用浮动伪增长来轻松插入内容，然后使用padding代替，在伪上使用一个正方形的值：100%

html {
  background: #000;
}
body {
  margin: 0;
}
.wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 2px 0 0 2px ;
  box-sizing: border-box;
}
.item {
  min-width: 25%;
  /* flex item handle floatting elements */
  box-sizing: border-box;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  background-clip: content-box!important;/* !important because i do not want to write again in every class below */
}
.item:before {
  content: '';
  float: left;
  padding-top: 100%;
  /* will make boxe be at min-height a square */
}
@media screen and (min-width: 500px) {
  .item {
    width: 33.3%;
  }
}
@media screen and (min-width: 900px) {
  .item {
    width: 25%;
  }
}
.one {
  background: #E65B60;
}
.two {
  background: #8873E3;
}
.three {
  background: #5BE67B;
}
.four {
  background: #E4E65B;
}
.five {
  background: #E6975B;
}
.six {
  background: #5BE6BD;
}
.seven {
  background: #C862E1;
}
.eight {
  background: #444;
}

<div class="wrapper">
  <div class="item one"></div>
  <div class="item two"></div>
  <div class="item three"></div>
  <div class="item four"></div>
  <div class="item five"></div>
  <div class="item six"></div>
  <div class="item seven"></div>
  <div class="item eight"></div>
</div>

你的codepen分叉：http://codepen.io/gcyrillus/pen/JXXKME

网格：到处都是边界？

2 个答案: