<input id="precedence-1" class="chk-board-item item-1" type="checkbox">
<label for="precedence-1">選択することで表示を切り替えれます</label>

<div class="board-grid board-precedence">
    <label class="board-item item-1" for="precedence-1">board-item</label>
    <div class="board-item-void item-1">board-item-void</div>
</div>
.board-grid {
    display: grid;
    grid-template-columns: 100px;
    grid-template-rows: 100px;
    column-gap: 5px;
    row-gap: 5px;
    padding: 15px;
    width: max-content;
}

.board-precedence .board-item {
    background-color: #cc5555;
}

.board-item-void {
    display: none;
}

.chk-board-item.item-1:checked ~ .board-grid .board-item.item-1 {
    display: none;
}

.chk-board-item.item-1:checked ~ .board-grid .board-item-void.item-1 {
    display: block;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.