CSS Grid full width columns on the mobile

Question

I use CSS Grid to show 2 columns (50% grey/50% black). You see how it looks

I want to make them full width on the mobile, so that gray would be in the first line, and black one in the second line.

My CSS:

.container {
display:grid;
height:100vh;
grid-template-columns: repeat(auto-fill, minmax(50%, 1fr))
}

What I am doing wrong?

P.S. I know all things can be done with @media queries, but I need more modern way.