How do I fix the double border on touching grid items?

Question

The grid items are supposed to have a 2px border, but when they are next to each other they have a 4px border. As you can see the top border is smaller than the border between the grid items. I've tried border: 2px solid black; and outline: 2px solid black; in .gridItem{}.

https://jsfiddle.net/8quwp76r/

CSS

body {
    background-color: bisque;
}

.container {
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-columns: auto auto auto auto;
    background-color: #80cbc4;
}

.gridItem {
    display: flex;
    justify-content: center;
    align-items: center;
    outline: 2px solid black;
}

.buttonContainer {
    display:flex;
    justify-content: center;
    justify-items: center;
    padding: 10px;
}

.buttonContainer button {
    padding: 12px 28px;
    font-size: 15;
}

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="myCss.css">
    <title>Etch-A-Sketch</title>
</head>
<body>
    <div class="buttonContainer">
        <button class="restartButton">Reset Colors</button>
    </div>
    
    <div class="container">

    </div>

    <script src ='main.js'></script>    

</body>


</html>

JS

document.body.onload = loadPrompt;

function loadPrompt() {
    let prompt = window.prompt("Please enter a number betweeen 1 and 100:", "4");
    if (prompt == null || isNaN(prompt)) {
        loadPrompt();
    } else if (prompt > 100 || prompt < 1 ) {
        loadPrompt();
    } else if (!isNaN(prompt)) {
        gridCreator(prompt);
    }
}

function gridCreator(gridNum) {
    let gridSize = gridNum;
    let masterGrid = document.querySelector('.container');

    for (let i = 1; i<= gridSize; i++) {
        let gridItem = document.createElement("div");
        document.body.appendChild(gridItem);
        gridItem.classList.add(`gridItem`);
        gridItem.textContent = `${i}`;
        masterGrid.appendChild(gridItem);
    }
    hoverEffect();
}

function hoverEffect() {

    let randomColor = Math.floor(Math.random()*16777215).toString(16);
    let gridElement = document.querySelectorAll('.gridItem');

    gridElement.forEach(item => {
        item.addEventListener('mouseover', event => {
            item.style.backgroundColor = '#' + randomColor;
            console.log(item);

        })
        item.addEventListener('mouseout', event => {
            randomColor = Math.floor(Math.random()*16777215).toString(16);
        })
    })
}

function resetButton() {
    let buttonPressed = document.querySelector('.restartButton');
    buttonPressed.addEventListener('click', () => {
        location.reload();
    })
}

resetButton();

score 1 · Answer 1 · answered Nov 12 '20 at 01:02

You can use the gap property (and change width to max-width):

.container {
    height: 100vh;
    max-width: 100vw;
    display: grid;
    grid-template-columns: auto auto auto auto;
    background-color: #80cbc4;
    column-gap: 5%;
}

You can read more about gaps on MDN.

Treasure Dev · Answer 2 · 2020-11-12T01:05:56.990

If this all fits into just the one row then you can change the styles a bit so that only the first child has a border to the right and the rest do not, like so:

.gridItem {
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
}
.gridItem:first-child {
    border: 2px solid black;
}

the notable issue with this is when you introduce the 2nd row and now the tops start having the thicker borders. For this, we can try the ':nth-child'. A sloppy "but works" solution could be like so:

.gridItem:nth-child(5) {
    border-right: 2px solid black; // otherwise this would be mia
    border-top: 0;
}
.gridItem:nth-child(6) {
    border-top: 0;
}
.gridItem:nth-child(7) {
    border-top: 0;
}
.gridItem:nth-child(8) {
    border-top: 0;
}

How do I fix the double border on touching grid items?

2 Answers2