Question

似乎我的媒体查询当前无法在CSS网格中正常使用，并且无法弄清原因。我正在建立一种移动优先的方式，所以我的第一个容器是单列。在大约850px处，我想进入一个包含两个项目的5列视图，但是媒体查询无法按预期工作。

index.html

<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>

index.css容器代码

.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;
}

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>

CSS网格和媒体查询的问题

1 个答案: