Question

我是CSS网格的新手，不确定是否可以在不依靠JavaScript的情况下完成以下任务。

当宽度小于200px时，我试图隐藏侧边栏。

但是我只想在200px不超过可用宽度的40%时显示边栏。

.grid {
  display: grid;
  grid-template-columns: minmax(0, 200px) 1fr 0; /* what goes here ? */
  min-height: 100px;
}

.grid .sidebar {
  grid-area: 2 / 1 / 2 / 1;
  background: red;
}

.grid .main {
  grid-area: 2 / 2 / 2 / 2;
  background: blue;
}

<div class="grid">
  <div class="sidebar"></div>
  <div class="main"></div>
</div>

例如，假设.grid宽400px。那么40%中的400px是160px，但是200px大于160px，因此.sidebar应该不显示或具有{{1} }宽度。

但是，如果0为.grid宽，则1000px中的40%为1000px。由于400px小于200px，因此显示的宽度应为400px。

是否可以仅使用CSS网格，结合使用CSS网格和其他CSS指令，还是不能使用JavaScript？

Answer 1

如果我能正确理解您的意思，那么您可以执行以下操作：

body {margin: 0} /* recommended */

.grid {
  display: grid;
  grid-template-columns: minmax(auto, 40%) 1fr; /* first column no more than 40%, ever (from 500px up) */
  min-height: 100px;
}

.grid .sidebar {
  /*grid-area: 2 / 1 / 2 / 1;*/
  background: red;
}

.grid .main {
  /*grid-area: 2 / 2 / 2 / 2;*/
  background: blue;
}

@media (max-width: 499.99px) { /* screen width (or the .grid) needs to be at least 500px wide, in order to display the .sidebar, because min-width of 200px is exactly 40% of 500px, so display it when 500px and more, but hide it when less */
  .grid {grid-template-columns: 1fr}
  .grid .sidebar {display: none}
}

<div class="grid">
  <div class="sidebar"></div>
  <div class="main"></div>
</div>

当列的宽度小于CSS网格中的特定大小时，如何隐藏列？

1 个答案: