Zet - How do I stack elements on top of each other using css grid?

How do I stack elements on top of each other using css grid?

You can create a css grid on the parent with a 1 row 1 column cell by using one grid-template-area.

eg.

.parent-div {
	grid-template-areas: "stack"
}
.first-item {
	grid-area: "stack"
}
.second-item {
	grid-area: "stack"
}

• Use case is when making a button that shows a spinner on click. You don’t want the button to resize to the spinner, you want the button to use the largest element in the stack as it’s size. This technique helps there. See video below.

See video

https://youtu.be/8327_1PINWI?feature=shared&t=119

#css