Overlapping css grid problem
Helllo,
I try to make 3 div's overlapping each other.
So far I have this : https://codepen.io/RoelofWobben/pen/JojOzqz
Can anyone help me figure out how on the top left in the image div a little div can be added so it overlaps the overlay div ?
11 Replies
Maybe someone else will grasp your description but I would need a sketch or figma wireframe or some kind of example of what you're going for of how small and where the overlap is and what does the others side of the new small div overlap onto
The overlay is the red area
@clevermissfox I hope this picture is then more clear
this is what I try to achieve
I see the red box is the overlay I just didn’t know what you wanted to add.
You can use named grid lines for overlapping content.
Here’s an example of how you can use it on cols , give it a try and of course adjust the column sizes to the values you want . Then give it a try to set up the
grid-template-rows using name grid lines. And don’t forget to see the grid area name on the new element ( I called it “new” on this example but give it a more appropriate name )I tried that on the pen but now the overlay2 is just as big as the overlay
Like I said you will need to adjust the values and also make sure to set the grid rows up
And make sure to comment out your grid-template-areas as it’s not ideal for keeping overlapping content simple
o, I thought this example was easy and simple enough to adapt : https://gridbyexample.com/examples/example22/
What size do you want it be?
My perspective is that it’s simple to adapt - you just need to make some adjustments on how you declare the grid template .
I find the grid areas overlap hack to be a little more confusing so didn’t want to bring it up but maybe you’ll find it easier to work with than named grid lines
1. change two lines of css on the grid template columns and grid template rows
2. comment out the grid template areas for now
3. then make sure you assign “overlay2” grid area name to the new element
When trying to overlap stuff in a grid it's important to remember that when you define a set of rows and columns named
<area>-start and <area>-end they will define a virtual area that you can use with grid: area just like any other.
With that in mind you also have to remember that you can define both areas and track names with the grid-template or grid shorthands. So you can do something like this :
(that only does the red, green and content areas, the light grey one is left as an exercise to the reader)Thanks both