Here is the code I am working with:
.my-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 20px;
}
.item {
background-color: #ddd;
height: 300px;
}<div class="my-grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="new-item">hello!</div>This is how it appears in my testing environment:
https://i.sstatic.net/vkhBT.png
You may notice that the hello text is displaying on a new row.
I am wondering if there is a way to insert the "hello" item after the existing grid instead of on a separate row. Basically, I want it to be the last item in the grid and aligned with the others.
The obvious solution would be to make the new-item div a child of my-grid, but unfortunately, I cannot do this because my-grid is an external component from the internet and I cannot modify its structure.
Both elements share a common parent, which could be any other element.