I want to use grid to have 2 columns of 400px, then when the browser window is too small for that, drop down to 1 column that is as wide (but no wider) than the browser.
Is there any way to achieve this just using grid without having to use media queries?
I have done it like this :
The main css bit
Full working JSFiddle demo
https://jsfiddle.net/whitedragon101/edc694hm/
The problem is with a small mobile screen of less than 400px the screen will show a horizontal scroll bar because I have set the minimum size of the column to be 400px;
Is there any way to achieve this just using grid without having to use media queries?
I have done it like this :
The main css bit
Code:
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
https://jsfiddle.net/whitedragon101/edc694hm/
The problem is with a small mobile screen of less than 400px the screen will show a horizontal scroll bar because I have set the minimum size of the column to be 400px;