css-grid media queries not responding

I am working with grid, and for some reason, using max-width in the media query seems to do nothing. code below:

Code:

body {
  color: #fff;
  text-align: center;
}

#content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 1rem;
  grid-template-areas: 'header header header header' 'block_1 block_1 block_2 block_2'
}

@media only screen and (max-width:700px) {
  #content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 1rem;
    grid-template-areas: 'header' 'block_1' 'block_2'
  }
}

#content>* {
  background-color: #fff;
  border: 1px solid black;
}

.header {
  grid-area: header;
  height: 150px;
}

.block_1 {
  grid-area: block_1;
  height: 150px;
}

.block_2 {
  grid-area: block_2;
  height: 150px;
}

<!doctype html>

<html>

<head>
  <link rel="stylesheet" type="text/css" href="master.css">
</head>

<body>
  <div id='content'>
    <div class='header'>Header</div>
    <div class='block_1'>Header</div>
    <div class='block_2'>Header</div>
  </div>
</body>

</html>

I expect the 2 block classes to stack on top of each other at 699px and below. However, they do not seem to want to do that.

Solution

You will also need to change grid-template-columns: repeat(1, 1fr); to make that grid take full width.

body {
  color: #fff;
  text-align: center;
}

#content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 1rem;
  grid-template-areas: 'header header header header' 'block_1 block_1 block_2 block_2'
}

@media only screen and (max-width:700px) {
  #content {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 1rem;
    grid-template-areas: 'header' 'block_1' 'block_2'
  }
}

#content>* {
  background-color: #fff;
  border: 1px solid black;
}

.header {
  grid-area: header;
  height: 150px;
}

.block_1 {
  grid-area: block_1;
  height: 150px;
}

.block_2 {
  grid-area: block_2;
  height: 150px;
}

<!doctype html>

<html>

<head>
  <link rel="stylesheet" type="text/css" href="master.css">
</head>

<body>
  <div id='content'>
    <div class='header'>Header</div>
    <div class='block_1'>Header</div>
    <div class='block_2'>Header</div>
  </div>
</body>

</html>