CSS Grid Issue
I'm creating 3 column grid and getting dynamic data in the columns. So one column can have more data than the other one.
With the same thing, next row is taking space according to the more content column. I want the next row to take up the empty space so there is no empty space in the page.
I've tried creating main container as grid with 3 columns and grid-template-rows to be minmax(100px , auto) but it's not working.
I'm new to grid, so not getting how it can be achieved.
In the image you can see the empty space being created, if there is empty space I want that to get filled with the next row
11 Replies
there is not really a grid way to do this, rows will be rows, there are no in-betweens (there will be masonry grid in the, hopefully, near future which could solve this).
For now, what you can try is to give a row span on the item for each count of data that it has. (pass it via a custom property)
can you make an example codepen of what you have now, I can take a look at it
row span will only give the number of row that can be spanned in the column, as the data is dynamic I won't be knowing the number of row spannin
@raz_esh
it depends, you have your dataset. you know how many subs there are when you go over them. here a really simple example (don't know what your data looks like)
https://codepen.io/MarkBoots/pen/JjBvYbx
If this doesnt work for you, please make an example in codepen
This is what I want it to look like, I'll give it a try
Just wondering, because this is an interesting question rajesh is asking.
What about grid-areas. Could he not just build it with areas, or am I missing something in his question?
that is absolutely not dynamic. what if there are a different amount people / different amount of content within a person. You'll have to declare everything
other option would be using
display: columns instead of grid, but then it will fill the space from top to bottom, left to right.
like so:
https://codepen.io/MarkBoots/pen/jOpxXdRThanks @markboots. 'display: column' works fine.
But there is one issue with display columns
It fills the other column
did you set
break-inside: avoid-column; on the itemsyes i did, but it's still not changing anything