Looked into a few questions here but they don't quite solve what I'm looking for.
Say I have a website and I want. On desktop I want this:
This is easy. grid-template-columns: repeat(3, 33%) (basically)
On mobile, however, I want this
What I'm running into is happens before it flips to a single column:
I'm trying clamp(), minmax(), and all sorts of things but nothing ever works as I want. Yes, I can totally use a media query but I was hoping to create a truly fluid grid/flex layout using modern CSS like clamp, grid, minmax, etc so there wouldn't be a need for media queries for basic layout changes.
I know this doesn't work but as a starting point as requested here's a simple version of one of my 100 attempts :) In this version I was trying to use clamp to switch from a repeat(3) to repeat(1).
.wrapper { display: grid; gap: 15px; grid-template-columns: repeat(clamp(1, calc(100% - 500px), 3), 33%);}.one { background: red;}.two { background: green;}.three { background: blue;}<div class="wrapper"><div class="item one"><h3>Example A</h3></div><div class="item two"><h3>Example Two</h3></div><div class="item three"><h3>Third Example</h3></div></div>