Take full width in single column grid
I want to create grid layout where:
- 1 or 2 columns
- if there is enough space on screen to fit 2 items at 350+ px each, then use 2 columns and stretch items to 50% (of grid container)
- if not enough, then use 1 column and stretch item to 100%
- but not limit item to 350px (let it further shrink on screens below 350px wide)
I attach image of how I expect it to work. Here white box is grid container, grey boxes are grid items
Technically I can use media or container query to decide between
But I thought maybe there is better solution without involving media/container queries?
- 1 or 2 columns
- if there is enough space on screen to fit 2 items at 350+ px each, then use 2 columns and stretch items to 50% (of grid container)
- if not enough, then use 1 column and stretch item to 100%
- but not limit item to 350px (let it further shrink on screens below 350px wide)
I attach image of how I expect it to work. Here white box is grid container, grey boxes are grid items
Technically I can use media or container query to decide between
minmax(350px, 1fr)1frBut I thought maybe there is better solution without involving media/container queries?
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
