Auto Resize Based on Grid Layout

[KiddoV]

I have a grid layout with 8 terminals like this:
I use the fit addon to make it fit the container but it doesn't work for the height (the width work though).

import { Terminal } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';

let xTermContainerEl: HTMLElement;
let xTermInst: Terminal;

xTermInst = new Terminal({
    fontSize: 11.5,
    cursorBlink: true,
    rows: 15, //Still doesn't work if I omit this line
});
xTermInst.loadAddon(fitAddon);
xTermInst.open(xTermContainerEl);
fitAddon.fit();

XTerminal

<div class="ui segment !p-0 !m-0 !h-full">
    <div class="ui top attached label flex flex-row">
        <span class="m-auto"></span>
        <i class="cog link icon"></i>
    </div>
    <div class="content !h-full block">
        <div bind:this={xTermContainerEl}></div>
    </div>
</div>

<div class="grid h-full grid-cols-[minmax(0,1fr)_280px] grid-rows-[minmax(0,1fr)_180px] grid-flow-col gap-1">
    <div class="row-span-1">
        <div class="grid h-full grid-cols-4 grid-flow-row gap-1">
            {#each Array(8) as xterm, i}
            <XTerminal></XTerminal>
            {/each}
        </div>
    </div>
    <div class="row-span-1">
        2
    </div>
    <div class="row-span-2">
        3
    </div>
</div>

See image:

How do I make it auto resize based on my grid layout?

Thanks!