Tailwind CSS: Stacking items without “absolute”
Grid comes to the rescue with three lines of code
Before the grid CSS property was broadly adopted by major web browsers, there was only one way to stack items on top of each other: position: absolute.
What this allowed was very simple. By adding position: absolute to children, while the parent was position: relative, these would be “floating below” the next child, each on top of each other.
The problem was that, since these were floating, the parent element forfeited information about the width or height of its children. You had to set the parent size manually, and in some cases bringing up JavaScript to match the desired proportions.
Today, grid allows the same results, and even adjusting its size to the biggest children, without using the position CSS property. If you’re using Tailwind CSS, this is the code.
The takeaway is simple. The parent element should be set as grid, and child elements that need to be stacked should have both col-start-1 and row-start-1 classes.
The above forces each grid element to start at the same point. With that, each child element will be stacked on top of the previous one.
That’s it.
