Dynamic Grid Columns
I created a grid layout. Can I make the .container dynamically use the remaining space?
Here is my jsfiddle: https://jsfiddle.net/withLume/wqb674u9/2/
Dynamic Grid Layout - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
10 Replies
What remaining space are you referring g to?
The extra space at the end is due to the padding you have on the images element.
Currently in the fiddle i have 6 images and the container takes 2 slotes. So everthing looks good. But when I remove an image the container is not long enough, it only spans accross 2 slots.
And if i have 5 instead of 6 images, it should look like this:
Do you understand?
That's not how grid works.
You could use a
grid-column-end: -1 so it always ends at the end, but without a start defined it's not going to do what you want it to.
I'd use flexbox for something like that.When should I use grid and when should i use flexbox? This layout looked more like a grid layout 😅
Normally, I'd agree 😄
But grid is all about defined spaces, as soon as something needs to be more independent, then flexbox
You could do this using
:has() to count the number of children, and then have that get the .container to have the right column and span count, but I'm not sure if it's totally worth the effortYeah, it might be overengineered.
the alternative would be to set the start and end columns with javascript for the last element. If you only set them with JS, your fallback would be to just have it as a regular sized grid item
This is the sort of case where it would be able to use counter() to calculate the current grid column 🤔
If that were possible you could use this this;
grid-column: counter(cols) / -1;
Though grid-column: auto / -1; would be even nicer 😀I tried using css vars and then count the elements. It didn't work. Btw. this is the end result: https://jsfiddle.net/withLume/wqb674u9/43/
Is it possible to further simplify it? Currently it uses a lot of css magic 😅
Dynamic Grid Layout - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
Your solution clearly works however it still breaks if you remove one of the images as you originally mentioned.
Your last comment re css vars actually made me think - this could be done using CSS custom properties (variables) though is still a bit of a hack and could get messy depending on how much flexibility as regards the number or cells (images on your case) you have.
I have thrown together a quick codepen to show a possible solution: https://codepen.io/cbolson/pen/XWyVXRz.
I'm sure that somebody with a better understanding of nth-child calculations could come up with a more graceful way to define the custom variable without having to define it for each column.... I tried using various combinations but ended up going the basic route.
Then of course this would all have to be reset for each breakpoint..... Not a great solution but I just wanted to see if it could be done without JavaScript