html - 在网格中的图像之间专门添加 2px 边框

Question

我正在使用 this显示图像的响应式网格，我的目标是在图像(它们“接触”的位置)之间 添加一个 2px 的边框，而不会出现在网格的外部。

Here's a link to a codepen example

/*
----------*Grid*----------
*/


.cbp-rfgrid {
	margin: 0 0 0 0;
	padding: 0;
	list-style: none;
	position: relative;
	width: 100%;

}

.cbp-rfgrid li {
	position: relative;
	float: left;
	overflow: hidden;
	width: 33.3333333%; /* Fallback */
	width: -webkit-calc(100% / 3);
	width: calc(100% / 3);
}


.cbp-rfgrid li a,
.cbp-rfgrid li a img {
	display: block;
	width: 100%;
	cursor: pointer;
}

.cbp-rfgrid li a img {
	max-width: 100%;
}

/* Flexbox is used for centering the heading */
.cbp-rfgrid li a div {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	background: rgba(255,255,255,1);
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
    align-items: center;
    text-align: center;
    opacity: 0;
}

.cbp-rfgrid li a:hover div {
	opacity: 1;
}

.cbp-rfgrid li a div h3 {
	width: 100%;
	color: #000;
	padding: 0 10px;
}
@media (max-width: 767px){
  .cbp-rfgrid li a div h3 {
    font-size: 2.375em;
  }
}
@media (min-width: 768px){
  .cbp-rfgrid li a div h3 {
    font-size: 3.375em;
  }
}

/* Example for media query: change number of items per row */

@media screen and (max-width: 767px) {
	.cbp-rfgrid li {
		width: 100%;
	}
}

<ul class="cbp-rfgrid">
   <li><a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" /><div><h3>Bukau</h3></div></a></li>
    <li><a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" /><div><h3>Noriko Olling</h3></div></a></li>
     <li><a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" /><div><h3>Erba</h3></div></a></li>
      <li><a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" /><div><h3>Raiso Japan</h3></div></a></li>
       <li><a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" /><div><h3>Aaltoin</h3></div></a></li>
        <li><a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" /><div><h3>Bukau</h3></div></a></li>
        <li><a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" /><div><h3>Noriko Olling</h3></div></a></li>
        <li><a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" /><div><h3>Erba</h3></div></a></li>
        <li><a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" /><div><h3>Raiso Japan</h3></div></a></li>
<!-- ... -->
</ul>

我尝试过调整边距并更改网格行为来实现此目的，但到目前为止还没有找到合适的解决方案。

非常感谢任何意见和/或建议!

(尽管网格是全宽的，但 Codepen 添加了 8px 的边距，所以防止它变成 10px 的边距是我的目标 :))

附言我不喜欢这个特定的网格或任何东西，所以如果有更好/不同/更灵活的方法，我完全愿意接受!

Answer 1

您可以使用纯 flexbox 来做到这一点-

这是一个片段，其中包含基于您的代码的简化代码。

/*
----------*Grid*----------
*/

*,
*::before,
*::after {
  box-sizing: border-box
}

.cbp-rfgrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin:0;
  padding:0;
}

.cbp-rfgrid li {
  flex: 0 30%;
  margin: 5px;
  border: 2px solid red;
  position: relative;
  list-style: none
}

.cbp-rfgrid li a img {
  max-width: 100%;
  display: block
}

.cbp-rfgrid li a div {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content:center
}

.cbp-rfgrid li a:hover div {
  opacity: 1;
  background: white
}
@media (max-width:767px) {
.cbp-rfgrid li {
 flex: 0 100%
}
}

<ul class="cbp-rfgrid">
  <li>
    <a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" />
      <div>
        <h3>Bukau</h3>
      </div>
    </a>
  </li>
  <li>
    <a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" />
      <div>
        <h3>Noriko Olling</h3>
      </div>
    </a>
  </li>
  <li>
    <a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" />
      <div>
        <h3>Erba</h3>
      </div>
    </a>
  </li>
  <li>
    <a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" />
      <div>
        <h3>Raiso Japan</h3>
      </div>
    </a>
  </li>
  <li>
    <a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" />
      <div>
        <h3>Aaltoin</h3>
      </div>
    </a>
  </li>
  <li>
    <a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" />
      <div>
        <h3>Bukau</h3>
      </div>
    </a>
  </li>
  <li>
    <a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" />
      <div>
        <h3>Noriko Olling</h3>
      </div>
    </a>
  </li>
  <li>
    <a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" />
      <div>
        <h3>Erba</h3>
      </div>
    </a>
  </li>
  <li>
    <a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" />
      <div>
        <h3>Raiso Japan</h3>
      </div>
    </a>
  </li>
  <!-- ... -->
</ul>