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.

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial