Grid media queries

HTML-CSS
1

Hello,

Is grid display compatible with media queries ?

I enter the same code for a media query (max-width:900px) -> see Link 1 and Link 2 below

How come that it doesnt work in link 2 ?

Thank you !

Steve

2

I might be struggling to understand what you’re trying to do, but you have different code for the .container class, which is why it doesn’t work for the second link. To answer your question, yes, grid is compatible with media queries.

Also, you should try to avoid mixing grid and flex because it’s confusing for other developers. For the first link, if you want the blocks to stack below 900px, you should add this to your media query instead:

  .container{
     flex-flow: column wrap;
  }
3

Hello ArcticPirate, thanks for answer.

Yes you did understand what i wanted to achieve: wrap columns into rows when screen size is smaller(and having these blocks of an equal size also)

  • ok for the tip for the flex and not mixing grid and flex (though i dont get why we can’t mix both) LINK 1
  • for LINK 2, i understand that once a container grid is setup, i cannot change the setup of the grid on a media query. I can only adjust the elements inside the grid.

Though i saw this example where the grid is redefined with the grid-template function.

Does it work because in the original css block .wrapper there is no parameters on the size and column sizing?

Hope i’ve been more explicit this time.

Thank you.

Steve

4

though i dont get why we can’t mix both

It’s confusing for other developers, and yourself. You’re changing an entire display property to something else, which may cause headaches down the road for everyone involved. It’s best to stick to one solution if you can.

The second link doesn’t work because you’re defining each block to be a column.

#block-1 {
  grid-column: 1; // Delete this
  grid-row: 1; // Add this
}

I’ve set up a new grid playground, changing the grid setup in a media query. You can take a look here: https://codepen.io/ArcticPirate/pen/zYOBdVp

5

Hello ArcticPirate,

It’s confusing for other developers, and yourself. You’re changing an entire display property to something else, which may cause headaches down the road for everyone involved. It’s best to stick to one solution if you can.

Ok i get it. Do not mix to have clean code, readable easily.

I’ve set up a new grid playground, changing the grid setup in a media query. You can take a look here: https://codepen.io/ArcticPirate/pen/zYOBdVp

Thank you for the link, i’ve learned from this. Seeing better how it works.
I added a grid-auto-rows:1fr; in addition to keep rows of an equal height in the media query

see you :slight_smile: