prevent double border on grid

Question

I'm implementing crossword puzzle using css grid

blank cells have no color. and other cells have black border.

the problem is that borders are collabsing over each other.

I've already opened this question and this question. but the proble here is that not all cells have this double border.

here is the code

.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: 0;
  margin: 0 auto;
}

.crossword-board__item {
  border: 1px solid #000;
  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>

its fixed, but it's more bigger that this demo. so i'd like to have dynamic solution, not adding custom border for each cell — Kareem Dabbeet, Apr 11 '20 at 13:51
the solutions in the question you linked apply here, examples: https://stackoverflow.com/a/47883004/8620333 / https://stackoverflow.com/a/54327607/8620333 — Temani Afif, Apr 11 '20 at 13:58
check the fist answer here https://stackoverflow.com/questions/43686698/collapsing-borders-using-css-grid using box-shadow and grid-gap, I think it's the best solution — arieljuod, Apr 11 '20 at 14:12

score 3 · Accepted Answer · answered Apr 11 '20 at 13:56

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>

Looks like you don't need padding of 1px here. It still works. — Manjuboyz, Apr 11 '20 at 14:08
it will overflow the container, if this is acceptable, you can omit it. :] — felixmosh, Apr 11 '20 at 14:09

prevent double border on grid

1 Answers1