How to make 3 column CSS grid change into 1 column on mobiles with media query

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>

Littles

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.

Brendis

It is not working. Do you think the reason could be having text spread over 2 columns on large screens? I was trying your way before and it did not change a thing. Basically format of my grid looks like this: Text-text pic Pic text-text where text is spread over two columns in one row. – Littles

You have to also change the grid-column for every boxes. Then only it will be visible. – Brendis

And that worked. Thanks a lot. I never thought about changing grid column. – Littles

Happy to hear! I thought you were unaware of CSS media queries only. :) – Brendis

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.

Collado

This was a long time ago, but hey, I'm here and trying to solve this exact thing. You lose the rowSpacing for instance when use this block approach. Another approach is to change the container to use flex column rather than display block, preserving the row gaps. – Comptroller

As @Comptroller stated this is definitely the best and easiest method as it keeps your gap styles intact. Just make sure to set the grid container to 'display: flex' and 'flex-direction: column' and it works like a charm. – Selma

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.

Cortezcortical

It is not working. Do you think the reason could be having text spread over 2 columns on large screens? I was trying your way before and it did not change a thing. Basically format of my grid looks like this: Text-text pic Pic text-text where text is spread over two columns in one row. – Littles

I really don't know. Could you put your code on codepen or some other site like that in order for us to see exactly what are you talking about. That would be very helpful. – Cortezcortical

Answer 4

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

Almaraz

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Agar