css grid overlap
I need to create the overlapping layout like in first image
But I am getting output like this second image
My code is also attached
codepen link: https://codepen.io/rohan031/pen/abgbMGZ
19 Replies
It'll be a lot easier to help if you share your code in codepen or something similar, or at the very least share your code in a code block rather than a screenshot.
wait let me create a codepen
I'm also unsure what the issue is, the circles overlap exactly how they do in the first image?
sorry for that
but row 2 and 3 ones are not overlapping
oh, I missed that part
code pen link
if i am changing 1fr in grid template rows to auto and explicitly adding height in items i get the desired layout
updating the codepen
only row 2 needs to be of auto
lol if someone finds the reason for this please tell me
using pseudo-elements might be a good idea here
you can use position absolute to remove it from the document flow
with a z-index of -1 or something, you might be able to position the elements under the grid
You could also use grid-auto-rows then the span keyword so if you have more content it will fall into place.
Aspect ratio should work instead of a fixed height too
aspect ratio is important, by the way
it guarantees that everything is always that proportion
Using
outline instead of border lets you do an outline-offset, so no need for a complicated grid 😄
https://codepen.io/kevinpowell/pen/VwJwoxV?editors=1100
Of course, this depends on how you are using it. If you need the content in each of those to fill up all the space, this won't work.another option, just with negative margins
https://codepen.io/MarkBoots/pen/qBzEdag
i did thought of negative margins but want to understand why it didn't move to that row
well what confuses me the most is that when i use
grid-template-columns: 1fr 2rem 1fr;
grid-template-rows: 1fr 2rem auto 2rem 1fr;
auto for in between elements everything falls into place but when using 1fr even if i explicitly define the middle elements to span the rows it didn't thats what is confusing me
like in this ss
i guess i am not properly understanding the behavior of 1fr and auto keywords
can someone please send me link to article or video where i learn more about it
1fr means "1 fractional unit"
if you divide the space into equal parts, 1fr will be 1 of those parts
and auto??
like min size it needs to fit the contnet?
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows#auto
better for you to read directly than me trying to explain and fail