如何删除CSS网格中的空细胞？

Question

我不确定这些是否是空细胞，很可能是由于最大元素而被拉伸的，请告诉我如何在没有JavaScript的情况下删除这些压痕。我试图使用网格 - 自动奖：colunm，但它行不通。

带有问题的图片

我要做的事情

<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; */
}

整个代码在这里不适合请参阅 codepen

Answer 1

这是你想要的吗？

我更新了以下代码以使其工作，

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

请检查工作示例下方。
https://codepen.io/shahilparichay/shahilparichay/pen/pen/pen/ppar，pen/pen/ppar-pen/lydpjgx

href =“ https://css-tricks.com/snippets/css/complete-guide-grid/” rel =“ nofollow noreferrer”>在这里