How to delete empty cells in css grid?

Question

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

Answer 1

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