How to wrap a grid

1

…I have a grid container with max-height 100px and with only 2 rows, but whenever I add more divs in the container it overflows (creates a third, fourth, etc) outside of the grid container. Is there way to prevent this? Is there property akin to flex-wrap for display grid?

.grid_container {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
max-height: 100px;
}

.grid_box {
width: 4vw;
height: 4vh;
}

2

Hi Jason,
could you post a codepen or jsfiddle that recreates the issue?

3

Thank you for trying, I solved it by creating a function that removes the last node whenever the number of divs goes beyond the last row.

4

Try:

grid-auto-rows: 100px;