Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

whitedragon101

macrumors 65816
Original poster
Sep 11, 2008
1,336
334
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
Code:
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
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;
 

olup

Cancelled
Oct 11, 2011
383
40
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
Code:
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
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;

Short answer: no
Long answer: You need media queries because regardless whether you use flexbox or grid for this, the browser won't know when to switch to what layout.

In this case it would actually be more recommendable to use flexbox as that is a few lines less code.
Something along the lines of:
Code:
.profile_container {
display: flex;
flex-direction: column;
}
@media screen and (min-width: 48em) {
.profile_container {
    display: flex;
   flex-direction: row;
   justify-content: space-between;
  max-width: 400px;
}
}
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.