1

I have a flexbox grid of images and I'm trying to only add one border to each of the cells — the challenge is that this is a grid that will continue to have images added to it, so I'll never know exactly how many images/cells there will be. I'm trying to accomplish this via CSS alone. My code:

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
}

.item {
  padding: 5px;
}
<div class="container">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
</div>

The obvious challenge is to avoid the double borders something like this would inevitably create on the class .item:

border: 1px solid #000;

And not knowing in advance how many images there will be in the grid means I can't use something like :nth-of-type(xn) to remove or add borders. Thanks for any help you can provide here.

jimiayler
  • 674
  • 2
  • 11
  • 27

1 Answers1

2

Slightly hacky, but using a negative left and top margin of 1 pixel will cover the double border.

* {
  box-sizing: border-box;
}

.container {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 5px;
}

.item {
  border: 1px solid #000;
  padding: 5px;
  margin: -1px 0 0 -1px;
}
<div class="container">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
</div>
Jon Uleis
  • 17,693
  • 2
  • 33
  • 42
  • Your solution looks great on my Macbook in Chrome, Firefox and Safari, but on my PC, Chrome, Firefox and Edge have multiple instances of double-borders. – jimiayler Dec 16 '21 at 15:43
  • @jimiayler Bizarre. I'm not seeing that issue on Windows in any of those 3 browsers! – Jon Uleis Dec 16 '21 at 16:07
  • Yeah, hard to show this in these comments, but definitely occuring. – jimiayler Dec 16 '21 at 16:09
  • I edited my question above to show screenshots of those examples. – jimiayler Dec 16 '21 at 16:14
  • 1
    @jimiayler Can you confirm your browser zoom level is 100% in those screenshots? It looks like you may be zoomed in (the 150px images are larger than 150px) which does lead to inconsistent border lines on the web. – Jon Uleis Dec 16 '21 at 16:58
  • 1
    Aha! So, this is a client-provided laptop I'm working on and the display resolution was set to 150% — set it back to 100% and we have a winner. Thanks for checking that and for the correct answer. – jimiayler Dec 16 '21 at 17:11