How do you make a grid responsive so that on an 1366 px width desktop it will show 3 columns but on an 1440 px width phone only 1 column? [closed]
Previously, when all phones had lower resolution than desktops, you just defined a breakpoint, and it was solved.
But today the new Samsung Galaxy S21 Ultra has an 1440 px wide screen, while the most prevalent desktop resolution is still 1366 px width.
So you can't set a breakpoint at say 1300 px.
How do you make such a responsive grid that on the phone it will only show 1 column, and on the desktop 3 columns?
I know that responsive design doesn't focus on device widths, but on what can fit on the screen and what not, but how do you apply that to this use case described above?
Thanks in advance!