How to delete empty cells in css grid? - html

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 automate your workflows, troubleshoot any issues, or 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