如何删除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; */
}

整个代码不适合这里，请查看代码笔

Answer 1

这就是您想要的吗？

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

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

检查工作样品下方。https://codepen.io/shahilparichay/pen/LYdpJGX

从这里学习网格