Grid @media

I have been playing around with columns and flex-boxes for a couple months, while flex-boxes are easy to deal with when having a responsive layout (@media), in my opinion they can be difficult to control.

I just fell in love with the grid system, but I’m not sure where to start to make it “responsive-happy.” Here’s my code, which doesn’t work correctly on an iphone…

/* GRID */

.grid {
display: grid;
width: 100%;
grid-template-columns: 1fr 1fr;
grid-template-rows: minmax(350px 400px);
}

.grid-2 {
display: grid;
width: 100%;
grid-template-columns: 1fr 1fr;
grid-template-rows: minmax(350px 400px);
}

@media screen and (max-width: 600px) {
.grid {
display: grid;
width: 100%;
grid-template-columns: 100%;
grid-template-rows: 1fr 1fr;
}

.grid-2 {
display: grid;
width: 100%;
grid-template-columns: 100%;
grid-template-rows: 1fr 1fr;
}
}