.TableContainer {
    padding: 10px;
    font-size: 20px;
    font-family: var(--FontCustom);
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr;
    grid-auto-rows: 100px;
    grid-auto-flow: row;   /* try row dense */
  }

[class^='TableItem']:nth-child(4n+5)
{
        margin-top: 30px;
}

@media (orientation: landscape){
.TableContainer {
    grid-template-columns: 2fr repeat(3, 1fr);
    grid-auto-rows: 100px;
    grid-auto-flow: row;   /* try row dense */
    }
    
    [class^='TableItem']:nth-child(4n+5)
    {
        margin-top: 0px;
    }
}

[class^='TableItem'] {
    display: grid;
    padding: 10px;
    background-color: var(--color3);
    align-items: center;
    justify-content: center;
}