Using CSS transitions in CSS Grid Layout
According to the spec, transitions should work on grid-template-columns
and grid-template-rows
.
7.2. Explicit Track Sizing: the
grid-template-rows
and
grid-template-columns
propertiesAnimatable: as a simple list of length, percentage, or calc, provided
the only differences are the values of the length, percentage, or calc
components in the list
So, if my interpretation is correct, as long as the only changes are to the values of the properties, with no changes to the structure of the rule, transitions should work. But they don't.
UPDATE
This does work but is so far only implemented in Firefox. Follow here
for other browser updates.
https://codepen.io/matuzo/post/animating-css-grid-layout-properties
~ a contribution in the comments by @bcbrian
Here's a test I created:
grid-container { display: inline-grid; grid-template-columns: 100px 20vw 200px; grid-template-rows: repeat(2, 100px); background-color: black; height: 230px; transition: 2s; /* non-essential */ grid-gap: 10px; padding: 10px; box-sizing: border-box;}
grid-container:hover { grid-template-columns: 50px 10vw 100px; grid-template-rows: repeat(2, 50px); background-color: red; height: 130px; transition: 2s;}
grid-item { background-color: lightgreen;}
<grid-container> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item></grid-container>
Can I animate grid-column ?
It doesn't appear that you can, in the sense you mean, animate grid-column
, based on the documentation over at Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
Grid column's animation type is discrete
, meaning there's no "tweening" or interpolation.
That's a bummer.
There are some hacky (or in other cases, JS-heavy) workarounds, but YMMV according to how much effort you want to put into it. See this thread, for example:
animating a smooth css grid-column change
css transitions not working for css grid-column and grid-row properties?
I added a width for your items. Then for the item hover I added a width, height, position absolute, transition, and a margin to center it.
On hover we make the container cover the width of all 4.
The CSS
<style type="text/css">
*{
padding: 0;
margin: 0;
text-decoration: none;
}
#cover {
display: grid;
height: 100vh;
grid-template-columns: repeat(4,1fr);
grid-template-rows: 100px auto auto 100px;
grid-gap: 5px;
grid-template-areas:
". . . ."
". item_1 item_2 ."
". item_3 item_4 ."
". . . ."
}
.item {
width:100%;
text-align: center;
vertical-align: middle;
font-size: 5em;
}
.item:nth-child(1) {
grid-area: item_1;
width:80%;
background-color: aqua;
transition:ease-in-out 1s;
margin-left:10%;
}
.item:nth-child(2) {
grid-area: item_2;
background-color: gray;
transition:ease-in-out 1s;
width:80%;
margin-left:10%;
}
.item:nth-child(3) {
grid-area: item_3;
background-color: lightgreen;
transition:ease-in-out 1s;
width:80%;
margin-left:10%;
}
.item:nth-child(4) {
grid-area: item_4;
background-color: lightsalmon;
transition:ease-in-out 1s;
width:80%;
margin-left:10%;
}
.item:hover {
grid-column: 2 / 4;
grid-row: 2 / 4;
width:80%;
height:80%;
position:absolute;
top: 0px;
z-index: 1000;
transition:ease-in-out 1s;
margin-left:10%;
opacity:0.7;
}
</style>
The HTML
<body>
<div id="cover">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
<div class="item">Four</div>
</div>
</body>
Note the opacity is their so you can see the behavior. You can remove it to get rid of the transparency of the container. Hope it helps.
Related Topics
How Does the CSS Specificity Work
CSS Div Stretch 100% Page Height
Scrollable Menu with Bootstrap - Menu Expanding Its Container When It Should Not
CSS Endless Rotation Animation
Changing the Width of Bootstrap Popover
Css3 Transition - Fade Out Effect
Stylesheet Not Updating When I Refresh My Site
How to Horizontally Align My Divs
How to Target Elements with an Attribute That Has Any Value in CSS
Html, CSS - Weird Invisible Margin Below Pictures
How to Keep Wrapped Flex-Items the Same Width as the Elements on the Previous Row