Как я могу скрыть столбец, когда его ширина будет меньше определенного размера в сетке CSS?

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 не должно отображаться или иметь 0 ширину.

Но если .gridширина 1000px, тогда 40% из 1000px равна 400px.Поскольку 200px меньше 400px, он должен отображаться с шириной 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>