макет сетки 2 столбца с вертикальными размерами, независимыми друг от друга - PullRequest
Новая
       11

макет сетки 2 столбца с вертикальными размерами, независимыми друг от друга

2 голосов
/ 14 марта 2019

Я создал этот jsFiddle , чтобы показать проблему.

Код ниже:

HTML: 

<div id="container">
  <div id="left-col">
    LEFT
  </div>
  <div id="right-col1">
    RIGHT1
  </div>
  <div id="right-col2">
    RIGHT2
  </div>
  <div id="right-col3">
    RIGHT3
  </div>
</div>

CSS: 

#container {
  display: grid;
  grid-template-columns: 15% 1fr;
  grid-template-areas:
  "left_area right_area1"
  "left_area right_area2"
  "left_area right_area3";
}

#left-col {
  grid-area: left_area;
}

#right-col1 {
  grid-area: right_area1;
}

#right-col2 {
  grid-area: right_area2;
}

#right-col3 {
  grid-area: right_area3;
}

Когда у меня большой вертикальный контент в левом столбце, он автоматически растягивает правый, а мой контент в правом столбце не отображается так, как я хотел.

Моя цель -правый столбец должен быть драйвером вертикального размера обоих столбцов, если они не могут быть связаны.

Есть ли способ либо:

  • сделать вертикальные размеры сетки независимыми (кажется маловероятным или больше не будет сеткой)?
  • разрешить переполнение в левом столбце, чтобы размер правого поля имел приоритет?

Любая другая помощь, оцененная по достоинствукурс.

1 Ответ

0 голосов
/ 14 марта 2019

Это потому, что ваш контейнер div растет в соответствии с большим div внутри.

Если вы хотите, чтобы правый столбец был независим от левого, вам нужно создать 2 контейнера div: 

<div id="container-left">
 <!-- Your left content -->
</div>
<div id="container-right">
 <!-- Your right content -->
</div>
...