Responsive Media Query !
Hi, i’m learning my way around designing my own website (a very basic one)
I have a lovely little grid now but wondered how i could make this responsive from a 4 columns, to 3 to 2 to 1, or possibly just 4, 2 & 1 depending on screen size.
I know i’m cheating by just asking you brains instead of researching long and hard but please help.
Here’s what i have at the moment which doesn’t fully work.
Thanks in advance 
@media screen and (min-width: 768px){
.gridwrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-auto-rows: 400px;
grid-gap: 15px;
max-width: 1100px;
margin: 0 auto;
}
}
I’m not even sure if this question should have been asked in the CSS section or here so apologies for that
Thanks C