I made a JSFiddle to reproduce this issue.
I'm trying to make a grid element grow on hover, but it causes this weird issue where it goes underneath another grid element and then jumps the way I expect it to.
Why does this happen? Is there a way to solve?
.container { height: 100vh; width: 100vw; display: grid; grid-template: 1fr / 1fr 1fr; margin: 1em; grid-gap: 1em; } .box { height: 100%; width: 100%; transition: width 0.5s; } .one { background: pink; } .two { background: red; } .box:hover { width: 60vw; }
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I wrote a detailed article about this effect and I invite you to read it to learn how to achieve this effect using CSS Grid:https://css-tricks.com/zooming-images-in -a-grid-layout/
.container { height: calc(100vh - 2em); display: grid; grid-template-columns: auto auto; margin: 1em; gap: 1em; } .box { width: 0; min-width: 100%; transition: width 0.5s; } .box:hover { width: 40vw; /* read the article to understand the math behind setting this value */ } .one {background: pink;} .two {background: red;} body { margin: 0; }You can combine Flexbox with
flex结合使用> Shorthand properties:.container { display: flex; gap: 1em; margin: 1em; } .box { flex: 1; /* This makes boxes take equal space by default */ transition: 0.5s; } .box:hover { flex: 2; /* A hovered box expands twice as fast as a non-hovered */ }try it:
.container { display: flex; gap: 1em; margin: 1em; } .box { flex: 1; transition: 0.5s; } .box:hover { flex: 2; } /* Demo only */ body { margin: 0; } .container { height: 100vh; } .box { height: 100%; } .one { background: pink; } .two { background: red; }