如何使用媒体查询在手机上将 3 列 CSS 网格更改为 1 列

Question

I'm using CSS Grid to make text mixed with pictures on the large screens. I want them to form a column on mobiles though. Basically 3 columns on desktops and 1 column on mobile devices. How to make it happen using media query? I was thinking about finding command for grid to disable while under 768px but don't even know if such a thing exist.

 .history { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 1em; grid-row-gap: 100px; }.box1 { grid-column: 1/3; }.box2 { grid-column: 3; justify-self: center; }.box3 { grid-column: 1; justify-self: center; }.box4 { grid-column: 2/4; }.box5 { grid-column: 1/3; }.box6 { grid-column: 3; justify-self: center; }.box7 { grid-column: 1/4; }

 <div class="history"> <div class="box1"> <p> The story starts in 2010 with Hartstown </p> </div> <div class="box2"> <img src="images/clubs.jpg" alt="Clubs"> </div> <div class="box3"> <img src="images/clubs1.jpg" alt="Clubs"> </div> <div class="box4"> <h3>Clubs Officialy Merge... </h3> <p>May 2011 saw the Official launch of Hartstown Aldridge Legends X1 in Dalymount Park... </p> </div> <div class="box5"> <h3>Our First Full Season... </h3> <p>We started the 2011 / 2012 Season with Approx 280 registered club altogether we had 18 Teams….. </p> </div> <div class="box6"> <img src="images/logo.jpg" alt="Logo"> </div> <div class="box7"> <h3>Forging Ahead... </h3> <p>We presently have approx 400 Registered Club Players and approx 60 nd 2 Over 35'5 Teams and we are still growing... </p> </div> </div>

Answer 1

 @media only screen and (max-width: 768px) { .history { display: grid; grid-template-columns: 1fr; padding: 1em; grid-row-gap: 100px; } } 

Just add the CSS properties of elements in your page that you want to look like on mobile. max-width means any device's screen size, less than 768px will show this CSS styles overriding the default styles.

Making grid-template-columns: 1fr; will make use of full width of the device screen, which is your requirement.

Please note: Put the @media queries only after the default CSS styles.

Answer 2

I know you have a couple other answers above, and one of which you chose as preferred - but the simplest, most elegant solution, which will save you the headache of having to reset all the boxes , is to declare .history as a block inside your small device media query. That is it. One line change.

@media only screen and (max-width: 768px) {
    .history {
       display: block;
    }
}

I tested it on your snippet above, and merely changing 'display: grid;' to 'display: block;' will allow the browser(s) to behave as they normally would, with all block elements stacking.

If you have any further questions, hit me up.

Answer 3

Add in media query width of screen that should trigger change and add there .history{ grid-template-columns: 1fr; }

Then adjust css more if it does not look nice.

Answer 4

Check if there's any grid items spanning, if so get rid of the spanning in your media query.