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  id="header__submenu-resources" data-opened="1">
    <ul  id="header__submenu-list-resources">
        <li >
            <a href="#" >
                Webinars
                <p >Get to know Tines and our use cases, live and on-demand.</p>
            </a>
        </li>
        <li >
            <a href="#" >
                Blog
                <p >Read articles by team members, from company updates to tutorials.</p>
            </a>
        </li>
        <li >
            <a href="#" >
                Prodcast
                <p >Listen to the latest episodes of our podcast, 'The Future of Security Operations.'</p>
            </a>
        </li>
        <li >
            <a href="#" >
                Customers stories
                <p >Learn how the world’s best security teams automate their work.</p>
            </a>
        </li>
        <li >
            <a href="#" >
                Story library
                <p >Discover helpful example Stories, connect them to your own tools and start customizing instantly.</p>
            </a>
        </li>
        <li >
            <a href="#" >
                Docs
                <p >Get to know the features and concepts of Tines, in detail.</p>
            </a>
        </li>
        <li  id="header__submenu-item-block">
            <a href="#" >
                <div >
                    <div >
                        <img src="images/tines-icon-galaxy-gate-150w.png" alt=""  />
                    </div>
                    <div >
                        <div >
                            <h3 >Tines</h3>
                            <span >Hub</span>
                        </div>
                        <p >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

CodePudding user response：

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