javascript - CSS 网格和媒体查询的问题

Question

<分区>

Answer 1

您只是在媒体查询中的网格模板区域后忘记了一个分号。

.container {
  display: grid;
  grid-gap: 1.2em;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-template-areas: 'option-panel' 'todo-list';
  margin: 2em;
}

@media only screen and (min-width : 850px) {
  .container {
    display: grid;
    grid-gap: 1.2em;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: 'option-panel option-panel option-panel todo-list todo-list';
    margin: 2em;
  }
}

.testbox {
  border: 1px solid red;
  background-color: blue;
  grid-area: option-panel;
}

#main-grid {
  grid-area: todo-list;
  max-width: 30em;
  margin: auto;
}

<div class='container'>
  <div class='testbox'>
    <h1>Test Box Walk Dog Hit Gym and Lift Bro Hit Gym and Lift Bro Hit Gym and Lift Bro Hit Gym and Lift Bro Walk Dog Hit Gym and Lift Bro Hit Gym and Lift Bro Hit Gym and Lift Bro Hit Gym and Lift Bro Walk Dog Hit Gym and Lift Bro Hit Gym and Lift Bro Hit
      Gym and Lift Bro Hit Gym and Lift Bro</h1>
  </div>

  <div id='main-grid'>
    <div class="container2">
      <h5 id='appHeader'>To-Do-List</h5>
      <div id='displayHideButton'> <a href='#' id='addItemSymbol' onclick='hideInputAndChangeSymbol()'><i id='symbol'  class="fas fa-minus-circle"  type='submit' ></i></a></div>
      <a href='#' id='addItem'></a>
    </div>

    <ul id='list-body'>
      <li id='enterItem'><input type='text' placeholder="Enter List Item..." id='newNote' class='inputEnterItem'></li>
      <li><span>Walk Dog Hit Gym and Lift Bro Hit Gym and Lift Bro  Hit Gym and Lift Bro Hit Gym and Lift Bro</span></li>
      <li><span>Hit Gym and Lift Bro</span></li>
      <li><span>Stretch</span></li>
    </ul>
  </div>
</div>