Exploring CSS grid layout transitions

Exploring transitions with grid.

I want to have a grid type interface where certain “cells” can expand to grid sizes.

Unfortunately just putting a :hover on the cell and changing its grid-column property would not animate.

Since for the top row I just want it to transition to the full width of that row, I decided I’d make that whole row one div and create a grid within it. Please don’t mind my butchered half css half Tailwind code. When I’m experimenting, whatever gets me to iterate faster wins.

.contact-wrapper {
		grid-row: 1 / 2;
		grid-column: 1 / 5;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;

		@apply border-blue-400 border border-dashed;
}

.contact {
		grid-column: 2/4;
		transition: 300ms;
		@apply w-full h-full border border-dark-300 bg-dark-200 rounded-xl grid items-center justify-center;
	}

Then to animate it, I’m going to basically shrink the first and last columns to 0.

.contact-wrapper:has(.contact:hover) {
	grid-template-columns: 0fr 1fr 1fr 0fr;
}

Can I layer?

What I was really hoping for though is that I could have cells beside it though that would get covered, but not shrink.

So what if I put this grid over top of another grid of the exact same positioning? Will that work?

Ah shit it works!

Can I swap top layer?

Now, could I make that layer that is technically below the Hello card, expand over top the hello card?

I tried putting a projects card, that lives under the div that the Hello expands to. This does not work because I can’t get the hover event to trigger past the hello layer.

It did work if I set pointer-events to none on the top layer. But now the hover on that doesn’t work…

Ok, no layers.

Ok there is just no way around the pointer events issue. But, instead of putting these two different things on entirely separate div layers, I put them under the same parent grid, but each still having their own sub grid. By swapping the z-index on hover, it worked!