Менять области сетки шаблонов без медиазапроса? - PullRequest
Новая
       10

Менять области сетки шаблонов без медиазапроса?

1 голос
/ 03 ноября 2019

Я пытаюсь добиться приведенного ниже макета без использования медиа-запросов. Причина, по которой я предпочитаю не использовать медиазапросы, заключается в том, что этот контент встроен в сайт с боковой панелью слева, которая может расширяться и сворачиваться. Когда он расширяется, он занимает около 400 пикселей, и, возможно, занимает 50, когда он свернут. Он разворачивается и разворачивается на основе взаимодействия с пользователем, а не ширины экрана, поэтому у меня нет хорошего способа определить, открыт он или нет из CSS. Из-за этого могут быть некоторые ошибки в моем макете, если я использую медиа-запрос на основе ширины экрана, а не фактической ширины содержимого. Можно ли как-нибудь использовать что-то вроде flex-basis или minmax для достижения этого макета без медиазапросов? 

/* functional code */

.a1 {
  grid-area: a1;
}
.a2 {
  grid-area: a2;
}
.b1 {
  grid-area: b1;
}

.grid {
  display: grid;
  grid-template-rows: 400px 200px 200px;
  grid-template-columns: 1fr 300px;
  
  grid-template-areas: 
    "a1 b1"
    "a2 b1"
    "a2 .";
}

/* Can I emulate this on the container width instead of the screen width? */
@media (max-width:1000px) {
  .grid {
    grid-template-columns: 1fr;
    grid-template-areas: "a1"
      "b1"
      "a2";
    grid-template-rows: 400px 600px 200px;
  }
  .b1 {
    width:300px;
    justify-self:center;
  }
}

/* other styling */
.grid {
  gap:8px;
}

.grid * {
  border-radius: 5px;
  background-color: lightgray;
  display: grid;
  place-items: center;
  text-align: center;
}

.collapsed { display: none; }
@media (max-width:1000px) {
  .uncollapsed {
    display: none;
  }
  .collapsed {
    display: block;
  }
}
   
<div class="uncollapsed">Uncollapsed State (make screen smaller to see collapsed state)</div>
<div class="collapsed">Collapsed State (make screen bigger to see uncollapsed state)</div>
<div class="grid">
<div class="a1">
  A1
  <br>
  Top-left normally
  <br>
  Top when collapsed
</div>
<div class="a2">
  A2
  <br>
  Bottom-left normally
  <br>
  Bottom when collapsed
</div>
<div class="b1">
  B1
  <br>
  Right side normally
  <br>
  Middle row when collapsed
</div>
</div>

К вашему сведению: я просто использовал ResizeObserver polyfill и немного JavaScript. Определенно не идеальный, но кажется, что контейнерные запросы в настоящее время невозможны без JS.

...