Optional Grid Column Track
Is there a way to have a grid column only included if there's room?
https://codepen.io/ascentcreative/pen/XWPXmoQ
I have a main content div and sidebar - basic example...
- The main grid is
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
- The content uses: grid-column: 1 / -2 (locking the right edge to the penultimate column track)
- The sidebar uses: grid-column: -2 (doing the opposite of the above)
When the screen is too narrow, there's only one, column, so the sidebar drops under.
However, it does allow the content and sidebar to be the same width (300px) before that happens. I'd like to be able to make the last column a different width:
https://codepen.io/ascentcreative/pen/abaddmO
grid-template-colums: repeat(auto-fit, minmax(400, 1fr)) 250px; for example, but that 250px track will always show, meaning the grid-column stuff hols the sidebar in place.
So, back to the original question - is there a way to say "only if room"? I tried daft stuff like repeat(minmax(0,1), 250px) which clearly was never going to work...
Is this just one where I have to use media-queries to change the columns, or perhaps flex is the better option.0 Replies