How to delete empty cells in css grid?

I’m not sure if these are empty cells, most likely they are stretched because of the largest element, please tell me how I can remove these indentations without javascript. I tried to use grid-auto-flow: colunm, but it doesn’t works.

picture with problem

what i’m trying to do

<nav class="header__submenu" id="header__submenu-resources" data-opened="1">
    <ul class="header__submenu-list" id="header__submenu-list-resources">
        <li class="header__submenu-item">
            <a href="#" class="header__submenu-link">
                Webinars
                <p class="header__submenu-description">Get to know Tines and our use cases, live and on-demand.</p>
            </a>
        </li>
        <li class="header__submenu-item">
            <a href="#" class="header__submenu-link">
                Blog
                <p class="header__submenu-description">Read articles by team members, from company updates to tutorials.</p>
            </a>
        </li>
        <li class="header__submenu-item">
            <a href="#" class="header__submenu-link">
                Prodcast
                <p class="header__submenu-description">Listen to the latest episodes of our podcast, 'The Future of Security Operations.'</p>
            </a>
        </li>
        <li class="header__submenu-item">
            <a href="#" class="header__submenu-link">
                Customers stories
                <p class="header__submenu-description">Learn how the world’s best security teams automate their work.</p>
            </a>
        </li>
        <li class="header__submenu-item">
            <a href="#" class="header__submenu-link">
                Story library
                <p class="header__submenu-description">Discover helpful example Stories, connect them to your own tools and start customizing instantly.</p>
            </a>
        </li>
        <li class="header__submenu-item">
            <a href="#" class="header__submenu-link">
                Docs
                <p class="header__submenu-description">Get to know the features and concepts of Tines, in detail.</p>
            </a>
        </li>
        <li class="header__submenu-item" id="header__submenu-item-block">
            <a href="#" class="header__submenu-link">
                <div class="submenu-block">
                    <div class="submenu-block__top">
                        <img src="images/tines-icon-galaxy-gate-150w.png" alt="" class="submenu-block__top-image" />
                    </div>
                    <div class="submenu-block__text">
                        <div class="submenu-block__top-text">
                            <h3 class="submenu-block__title">Tines</h3>
                            <span class="submenu-block__mark">Hub</span>
                        </div>
                        <p class="submenu-block__description">Learn how to&nbsp;automate your workflows, troubleshoot any issues, or&nbsp;get help from our support team.</p>
                    </div>
                </div>
            </a>
        </li>
    </ul>
</nav>

CSS:

.header__submenu-list {
    margin: 0;
    padding: 40px 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 30px;
    background-color: var(--color-light);
    width: auto;
    border-radius: 0 0 28px 28px;
}

#header__submenu-list-resources {
    grid-template-columns: repeat(3, 1fr);
}

.header__submenu-item {
    padding: 0 20px 0 20px;
    align-self: flex-start;
}

#header__submenu-item-block {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
    align-items: flex-start;
    /* grid-area: block; */
}

The whole code won’t fit here, please see the codepen

>Solution :

is this what you want ?

I updated the following code to make it work

#header__submenu-item-block {
    grid-column: 4;
    grid-row: 1 / 3;
}

check below the working sample.
https://codepen.io/shahilparichay/pen/LYdpJGX

learn about Grid from Here