Position grid behind other items
Hey, so this might be a little more difficult, that is why I came here to ask this, because I have no clue how I would achieve it properly.
Following demo: https://jsfiddle.net/3d15u4hp/35/
As you can see, I have a container which is a grid and is set to make twelve columns.
Now, I have over twelve items in that container.
First, there are the grid columns. These are just cells that should be displayed with blue outline.
And second, you can see that there are some items (with text).
What I now want to achieve is that these blue grid cells are visibly behind the text items, and the grid columns should still work properly for both of them.
So it should look something like the attached image.
You might wonder why I would want to do this, and the reason that I cannot do it with pure CSS here is that each of these grid columns there marks a drop zone. (I will use the JS drag and drop api to create some nice builder)
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
21 Replies
So the requirement is that
<div class="grid-column"></div> and <div class="grid-item"> are definitely siblings.One method might be to define the corresponding elements (eg 1st and 13th) so that they occupy the same column position:
@lko he want them to be siblings 😉
if understand correctly you need to put them on the same row with grid-row and then manipulate grid-column to place them where you want.
hello, thank you, but they need to be siblings
quick demo using the method I mentioned.
https://codepen.io/cbolson/pen/VwNVJLN
You could also define the grid areas but that seems like overkill for something like this.
Damn thank you very much, I thought I needed position absolute to achieve the having behind
thank you as well, I will play around a bit and tell you how it turned out 🙂
good luck :thumbup:
When I have more than 12 columns and want them to automatically wrap to the next line I need
minmax() right?don't think you can do the wrap in this situation
oof then I cannot use this solution
I basically need this for an infinite amount of rows
and more than 12 items
you could use JS (which you are going to be using anyway) to do the nth-child calculations
Let me shortly explain my basic problem so you have better understanding:
In the image you can see the
data-zone div, and this is basically a drop zone to allow people to drag and drop elements onto a specific grid cell in this case. (using javascript drag and drop api)
Only problem I have is that I want people to be able to resize items.
But here this is only possible by adding more column span to the zone, but the zone should not be made larger. Just the child item inside the zone should take up multiple columns
So the only solution I could think of is to have the indiviual items and zones to be siblings
but maybe there is a better way
Continuing the idea of 12 columns (max) and your original code of having the 12 drop zones first and then the items, I have updated my codepen to have multiple rows of 12 using this CSS:
However, in reality, it might be easier to have the drop-zone and item next to each other in the html rather than in blocks of 12.
(note - I was doing this before reading your last comment but I wanted to mention what I had done anyway)
However, in reality, it might be easier to have the drop-zone and item next to each other in the html rather than in blocks of 12.Because it simplifies CSS?
Just because this method requires you to always have 12 drop zones for each row of the grid before adding the “draggable” elements.
I would have made it that all drop zones come first and then all draggable elements, no blocks of one and then the other
Squarespace for example does this
Just reading through your previous message again - are there only 12 drop zones and the an undefined number of droppable items?
Both are an n amount of items.
My current logic is that the amount of droppable items is multiplied by
24 to dynamically get more dropzones when you create new items.
And each row has 12 columns (12 drop zones)
All that I currently have would work fine if I did not need to resize everything, but this sibling logic is required so I can make use of column span of css grid
for the items