Responding design with grid/flex and block

Can I use grid/flex to a class/id when using desktop,
And giving it in @media max/min a different type of display, like block etc’, does it works?

And I sow the viewport and I don’t relly know how it combined with flex/grid etc’, If anyone can explain it,It will be a great help

Thank you all,

Hey Nadav991!

You can absolutely use @media to give an element different styles at different screenwidths.

There aren’t really any limits to this. The styles that you give an element at one range of screenwidths will only be applied between those screenwidths, so you could certainly give an element ‘display: grid;’ until 991px and then change to ‘display: flex;’ from 991px upwards. You could even keep ‘display: grid;’ throughout and just change the ‘grid-template-columns’ property

A common practice is mobile-first development. Do all the styles you need to for the smallest screenwidth you want to display your site (max-width: 320px perhaps). Once it looks good at that width, widen the screenwidth until you can see that some new styles are in order, and then implement them for a new range of screenwidths (e.g. min-width: 320px, max-width: 425px).

If you keep working up like that, you can feel confident that the smallest views are already done and that styles you write will only apply where and when you want them to.

Hope that helps. Good luck!