Unable to keep the gridlines behind grid items, they're overlapping! how to prevent this?
So I've got 9 tiles and its a grid layout. I want to add 4 gridlines for each tile, top/bot/left/right . But i want the gridlines to be behind the tiles, I even tried negative z-index for each gridline and z-100 for the tile but it doesnt work
https://play.tailwindcss.com/fKF7sIPjzR
33 Replies
This is a bit tricky.
As you have seen, no amount of z-indexing works. Basically the child elements, your lines, can't be placed behind their parent element, your blocks.
I can think of 2 possible solutions to this though no doubt there are others:
1. Create an exact copy of the all of the blocks, placing them in the same place in the grid (elements can share cells) and use these clones just for the lines. You either place these "empty" blocks before the main ones in the HTML or you use z-index. z-index will work here as they would be siblings, not children.
2. Alter your layout slightly, placing the "contents" (text, bg color ect.) in another sibling rahter than directly within the cell itslef. As with the previous example, siblings can be placed above/behind each other so in this case you just need to adjust the z-index of the "content" element.
The 2nd option is probably preferable as it avoids adding a load of empty boxes
Based on your code, I have moved the "tile" element to a new sibling, removed some styling on the parent element and adjusted the
tileclass a bit
Notes:
Personally I would use psuedo elements rather than actual div elements for the lines.
I don't really use Tailwind but I believe that the use of @apply for custom styles is not encouraged but things may have changed or I may be missunderstanding your use case
Let me know if you would like to see how it could be done with psuedo elements. You would basically use one psuedo element for the horizontal lines and the other for the vertical lines.will test the 2nd option
as for psuedo elements, arent they just before after
how could we add 4 lines
yes
On the before pseudo element define inline (left and right) borders for the vertical lines
On the after pseudo element define block (top and bottom) borders for the horizontal lines
i tried 2nd option, it doesnt work @Chris Bolson
as u can see the lines of "color" tile overlaps the framework 🤕
https://play.tailwindcss.com/9mg7nLdUl4
it does work, I have a working demo.
You haven't implemented it as I suggested. The "content", eg "Framework" needs to be contained within a div, making it a sibling of the line elements
oh mb, lemme try
phew @Chris Bolson 🥳
Do you want to see how to do it with the psuedo elements or might that just confuse things?
thats way above my lvl ðŸ˜
i doubt if thats gonna scale
cuz onscroll am scaling the tiles too
of course it would scale
the one which just worked messes up on scale ðŸ˜
like its overlappin
Unfortunately what I suspect that is happening is that by defining scale (transform) it creates a new stacking context on each element, bringing it's "borders" above the previous element.
is there not a fix for this
else i give up on this feature 😔
which makes me think that the option 1 might be better.
I have been testing this on my version and have had similar issues when scaling using the borders within the tiles.
On a separate test, using the duplicated "empty" boxes, there were no issues when scaling as they are all behind the the main boxes
This is my original code which I have just adapted using the "duplicate" boxes method (option 1).
i see you and chris are getting there. just wanted to show another possible approach without using the positioning?
layers of subgrid.
https://codepen.io/MarkBoots/pen/zxvPORE
that way you only have to control the grid-template-cols/rows sizes
Does this scale?
i mean you have to adjust the grid-template and declare the grid-areas if you want more content
i didnt see the part about animating the thing.. was only working on the original question
The issue with using separate elements for the borders is that, when scaling (with whatever method your are using) you will need to scale both the "content" elements and the "line" elements. This shouoldn't be an issue but just something to bear in mind.
i dont understand this solution 🤔
cant we just add pseudo elements for original tile? instead of making empty boxes
pseudo elements are stuck to the element, so they wont be able to go behind the tiles that come before it
unless you make them relative to the grid, but then you need to position them absolute with set positions
I have adapted your Tailwind example to use these "empty" boxes. I have used named grid areas to hopefully help you understand it better. To clean up the code (Tailwind...) I have moved the "Lines" styles into an @apply. As I mentioned before this isn't recommended but seeing as you are already doing it for the tiles....
Of course this doesn't have any scaling as I don't know how you are doing that part.
https://play.tailwindcss.com/L7DdVYPRSj (updated to include hover scale to demonstrate that the lines should also scale with their corresponding boxes)
Note - this is very similar to what Mark did for you and to what I previously did in my codepen demo
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
this works
Although i have to scale the empty boxes too
i wish this worked lol, sounded so simple ðŸ˜
is it not possible to keep pseudo elements behind of original ones 🤔
i'll just adapt to the above empty boxes* method solution
thanks everyone 🙌
hm, i think it works with outline and using the correct order
https://codepen.io/MarkBoots/pen/zxvPORE
i tried this one, messes up on scale
ah yea, scale/transform create new stacking contexts... then there is no way around it
i'll just stick to the above solution http://play.tailwindcss.com/L7DdVYPRSj
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.