Return to Answer

edited body

Source Link

edited Feb 13 at 1:51

The grid definition

.game-grid {
    display:        grid ;
    grid-template-columns:  300px 300px  60px ;
    grid-template-rows:  40px 300px 150px ;
}

did not take into account the 1px border that I had defined in the CSS. If anything, the canvas should have "busted-out" of its limits, but it was doing the opposite.

Against all reasonable logic, "bloating" the values to include the border thickness as follows,

.game-grid {
    display:        grid ;
    grid-template-columns:  302px 302px  62px ;
    grid-template-rows:  42px 302px 152px ;
}

made the gaps on both side and below grid-item5, BoxE, disappear.

Since the positioning of the canvas was taken from the coordinates"div" coordinates, there is no rationale behind this working, but it does! Go figure. :-(

The only remaining mystery is why the horizontal line between the grid-item3 and grid-item5 is showing with only 1 pixel wide, when all the others are showing 2px wide, as expected.

The grid definition

.game-grid {
    display:        grid ;
    grid-template-columns:  300px 300px  60px ;
    grid-template-rows:  40px 300px 150px ;
}

did not take into account the 1px border that I had defined in the CSS. If anything, the canvas should have "busted-out" of its limits, but it was doing the opposite.

Against all reasonable logic, "bloating" the values to include the border thickness as follows,

.game-grid {
    display:        grid ;
    grid-template-columns:  302px 302px  62px ;
    grid-template-rows:  42px 302px 152px ;
}

made the gaps on both side and below grid-item5, BoxE, disappear.

Since the positioning of the canvas was taken from the coordinates, there is no rationale behind this working, but it does! Go figure. :-(

The only remaining mystery is why the horizontal line between the grid-item3 and grid-item5 is showing with only 1 pixel wide, when all the others are showing 2px wide, as expected.

The grid definition

.game-grid {
    display:        grid ;
    grid-template-columns:  300px 300px  60px ;
    grid-template-rows:  40px 300px 150px ;
}

did not take into account the 1px border that I had defined in the CSS. If anything, the canvas should have "busted-out" of its limits, but it was doing the opposite.

Against all reasonable logic, "bloating" the values to include the border thickness as follows,

.game-grid {
    display:        grid ;
    grid-template-columns:  302px 302px  62px ;
    grid-template-rows:  42px 302px 152px ;
}

made the gaps on both side and below grid-item5, BoxE, disappear.

Since the positioning of the canvas was taken from the "div" coordinates, there is no rationale behind this working, but it does! Go figure. :-(

The only remaining mystery is why the horizontal line between the grid-item3 and grid-item5 is showing with only 1 pixel wide, when all the others are showing 2px wide, as expected.

Source Link

answered Feb 13 at 1:34

Eric Marceau

The grid definition

.game-grid {
    display:        grid ;
    grid-template-columns:  300px 300px  60px ;
    grid-template-rows:  40px 300px 150px ;
}

did not take into account the 1px border that I had defined in the CSS. If anything, the canvas should have "busted-out" of its limits, but it was doing the opposite.

Against all reasonable logic, "bloating" the values to include the border thickness as follows,

.game-grid {
    display:        grid ;
    grid-template-columns:  302px 302px  62px ;
    grid-template-rows:  42px 302px 152px ;
}

made the gaps on both side and below grid-item5, BoxE, disappear.

Since the positioning of the canvas was taken from the coordinates, there is no rationale behind this working, but it does! Go figure. :-(

The only remaining mystery is why the horizontal line between the grid-item3 and grid-item5 is showing with only 1 pixel wide, when all the others are showing 2px wide, as expected.