CSS grid or flexbox: All elements same width and height, but overlapping

[mholt]

This one has me thrown for a loop.

Say I have a CSS container with 3 elements. The last element has content, but all 3 elements should have the same height according to the last element's size (and the width can be a hard-coded percentage or pixel value, so that's not any trouble I think).

Using display: flex or display: grid gets the auto-height thing working, but how do you make it so that they overlap each other? Suppose each element is 800px wide but I want them to be offset from the left 50px, 100px, and 150px.

So really, all I need is to slide them over to the left. Any idea how to do that?

 

[Adam]

Hmm... what is the end goal here? It should be possible but the best implementation will depend on what you're looking to do with them. A slider? Cover flow? Animate on hover?

 

[Adam]

Something like this?

 

[mholt]

Nothing fancy. Literally just want them aligned like this:

In the end, I'll have a small stack of papers (I know how to do the rest though):

 

[mholt]

Just saw your next reply! Yes, I think something similar. Let me play with that and see.

 

[Adam]

Just saw your next reply! Yes, I think something similar. Let me play with that and see.

Just cleaned it up a bit. Let me know how you get on! Looking at your graphic my first thought would be to use before and after psuedo elements instead but sounds like you got a plan. 😁

Let me know how you get on!

 

[Ed Quijano]

With the CSS grid, you have many options. It's a matter of error and trial. Maybe you can try now with subgrid, nested grid, grid areas, and layering items. Firefox developer tools can help you to see how to accommodate your elements. One of the tricks that I learn how to deal with the CSS grid is to give background color to each element in order to manipulate the boxes. Hope this can help you.

 

[mholt]

Ah, okay, so thanks to your pen I was able to figure something out.

I position each element as relative, then shift the second element left -100%, then the third one (the one with content) left -200%, (and so on if there were more).

I'll link to the final result when it's done! Kind of a neat effect. Not super elegant, but it works. Thanks for your help!!

 

[mholt]

Okay, here's the result! caddyserver/dist

(Sorry, it's not hosted on a live server yet, just something we're using as a welcome page for Caddy distributions. Anyway, that's the HTML file!)