Preventing Double Borders in CSS Grid

Preventing double borders in CSS Grid

You may do like this :

.wrapper {
  display: inline-grid;
  grid-template-columns: 50px 50px 50px 50px;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
}

.wrapper > div {
  padding: 15px;
  text-align: center;
  border-top: 1px solid black;
  border-right: 1px solid black;
}

body {
 background:pink;
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

prevent double border on grid

You can move by 1px all input top & left, this will make borders collapse on each other.

Then add a padding of 1px to the container.

This will be the result.

.crossword-board-container {  position: relative;  background: #fff;}
.crossword-board {  background: transparent;  display: grid;  grid-template: repeat(5, 4em) / repeat(5, 4em);  list-style-type: none;  padding: 1px;  margin: 0 auto;}
.crossword-board input {  margin: -1px 0 0 -1px;  border: 1px solid red;  background: transparent;  text-align: center;  font-size: 20px;  font-weight: bold;  text-transform: uppercase;}

<div class="crossword-board-container">
  <div class="crossword-board">    <!-- ROW 1 -->    <span></span>    <span></span>    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />    <span></span>    <span></span>
    <span></span>    <span></span>    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" /> <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />

    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />    <span></span>    <span></span>
    <span></span>    <span></span>    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />    <span></span>    <span></span>
    <span></span>    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />
    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />    <span></span>
  </div></div>

Preventing double borders in CSS

#divNumberOne { border-right: 0; }

Prevent double border from responsive columns

You can use border-right/border-bottom with your element and use border-top/border-left with the container:

.cell {  border-right: 1px solid black;  border-bottom: 1px solid black;}.row {  border-top: 1px solid black;  border-left: 1px solid black;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"><div class="row no-gutters">  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div></div>

Prevent double borders around side-by-side elements

Since you know how many flex items there are in each row, you can use the :nth-child() selector to apply borders to items missed by the main rule.

.wrapper {  display: flex;  flex-wrap: wrap;  width: 400px;}.container {  flex-basis: 20%;  border-top: 1px solid #000;  border-bottom: 1px solid #000;  border-right: 1px solid #000;  margin-bottom: 1px;  min-height: 100px;  display: flex;  justify-content: center;  align-items: center;}
.container:nth-child(4n + 1) { /* add border to first child in each row */  border-left: 1px solid red;}

<div class="wrapper">  <div class="container">1</div>  <div class="container">2</div>  <div class="container">3</div>  <div class="container">4</div>  <div class="container">5</div></div>
<hr>
<div class="wrapper">  <div class="container">1</div>  <div class="container">2</div>  <div class="container">3</div></div>
<hr>
<div class="wrapper">  <div class="container">1</div>  <div class="container">2</div>  <div class="container">3</div>  <div class="container">4</div>  <div class="container">5</div>  <div class="container">6</div>  <div class="container">7</div>  <div class="container">8</div>  <div class="container">9</div>  <div class="container">10</div></div>

Collapsing borders using CSS Grid

You may use grid-gap and box-shadow:

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  box-sizing: border-box;
  grid-gap:10px;
}

.block {
  width: 100px;
  height: 100px;
  background-color: lightgrey;
 box-shadow:0 0 0 10px palegreen;
}

.first {
  grid-column: 2 / span 1;
}

<div class='container'>
  <div class='block first'>1</div>
  <div class='block'>2</div>
  <div class='block'>3</div>
</div>

Only One Border for Flex Image Grid Cells via CSS

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>