How to animate grid layout expansion?

Question

I want to know how to animate the expansion of a grid layout. As you can see in the code, I have 4 divs. Two of them will be displayed, and the other two will only be displayed when the checkbox is selected. When the checkbox is checked, another row will be added containing div3 and div4. How do I animate the extension? It's best to keep the size of the grid small. I don't want the animation to affect the (non-existent) margins. I also want to do this without JavaScript. is it possible?

P粉529581199 · Answer

The solution is very simple. I put my grid inside another grid. Then I simply used fr as a way to resize the rows on the div where the main grid is. This results in the possibility of converting grid rows from 0fr to 1fr. That's it.

.toggle {
    width: 100%;
}

.grid {
    display: grid;
    width: 20%;
    border: solid black 2px;
}

.div1 {
    grid-column: 1;
    grid-row: 1;
}

.div2 {
    grid-column: 2;
    grid-row: 1;
}

.wrapper {
    grid-column: 1 / 3;
    grid-row: 2;
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 200ms;
}

.div3 {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
}

.div4 {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
}

.toggle:checked ~ .grid > .wrapper {
    grid-template-rows: 1fr;
}




    
    
    
    Website


    
    
        Hello
        Hello2
        
            Hello3
            Hello4

Also, if you have different rows of different sizes in your grid. For example, one at 0.05fr and one at 1fr, the animation will become "laggy". What you can do is put a wrapper grid inside another wrapper grid. Then, instead of using the actual row to animate that grid, you use the same method to animate the children of the first grid or the parent of the actual grid.

This is a weird workaround, but it's a way to solve the problem without redoing too much.