Just add display: block; to your svg (since d3 generates it), and that tiny white space will go away. So in your function, do this:

function renderCanvus(containerDiv) {
    // General function to render copies of canvas
    const canvusObj = d3
        .select(containerDiv)
        .append('svg')
        .attr('width', '100%')
        .attr('height', `${thirds}`)
        .attr('style', 'display: block')
        .attr('id', 'Random-chart');
    return canvusObj;
}

I’m working on a Data Science dashboard project and am having trouble fine-tuning some of the container spacing. I’ve turned most of the page features off to reduce the scope of the problem. I’m trying to achieve 4 evenly spaced div containers in the 960×600 main container, however, the lower right div with subcontainers keeps throwing off the alignment. I’m sure there is a way to do this elegantly with HTML and CSS but coming from a background in Python I haven’t been able to narrow down the root cause. Now after struggling all yesterday on it feel it’s time to put up my hand and ask for help.

//HTML
        <div class="container shared" id="Time-Series">
            <div class="sub-container" id="random-walk">
                <h1>Random Walk</h1>
                <p id="D1-values">D1 Values</p>
            </div>
            <div class="sub-container" id="histogram">
                <h1>Normal vs Cauchy Sampling</h1>
                <p id="D2-values">D2 Values</p>
            </div>
            <div class="sub-container" id="cumulative">
                <h1>Random Accumulation</h1>
                <p id="D3-values">D3 Values</p>
            </div>
            <script src="/rand.js"></script>
        </div>

//Javascript
const randomContainer = document.getElementById('Time-Series');
const subcanvusheight = randomContainer.offsetHeight;
const subcanvuswidth = randomContainer.offsetWidth;
const thirds = subcanvusheight / 3;

function renderCanvus(containerDiv) {
    // General function to render copies of canvas
    const canvusObj = d3
        .select(containerDiv)
        .append('svg')
        .attr('width', '100%')
        .attr('height', `${thirds}`)
        .attr('id', 'Random-chart');
    return canvusObj;
}

The canvases are created in the javascript files with the D3 module. However, for whatever reason, somewhere along the rendering path, about 10px is added to the bottom of each throwing off the whole grid. I’ve done my best to search out that 10px in my code and chrome dev console but haven’t been able to find any hint of it yet. I’ve also tried doing a css reset to no effect. If anyone has any suggestions about why this is happening and how to fix it that would be greatly appreciated.

//CSS
* { box-sizing: border-box }

.main-container {
    width: 960px;
    height: 600px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 10px;
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    border: 3px solid black;
    display: flex;
    margin: 0;
    padding: 0;
}

.shared {
    display: flex;
    border: none;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-evenly;
}

.sub-container {
    border: 3px solid black;
    align-items: stretch;
    justify-content: stretch;
    margin: 0;
    padding: 0;
}