Can we make a grid layout that adapts to ANY screen size without using media queries?
ive been playing around with CSS functions like `fit-content` but hit some roadblocks:
. grid {display: grid;}. item {width: fit-content(20rem, minmax(min(var(--item-size), calc((100% - (4*var(gutter)))/3)), max(calc(((95vw - gutter) / var(grid-cols))), auto)));} // Anyone tried this before? What did you find works best for truly flexible grids?
After some digging, I found a solution using CSS Grid's `minmax()` function:
. grid {display: grid;}. item {width: min(20rem,max(calc((1fr - (4*var(--gutter))) / var(grid-cols)),((95vw + --item-size) *.3)));} ⚡its not perfect, but it handles most cases! Anyone want to give this a spin and share your tweaks? ❤