Можно ли привязывать поведение позиции к конкретным строкам сетки? - PullRequest
Новая
       76

Можно ли привязывать поведение позиции к конкретным строкам сетки?

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

У меня есть основной макет с двумя столбцами: один для изображения, другой для текста. Поскольку текстовый столбец может стать довольно длинным, я бы хотел, чтобы изображение прокручивалось. Я могу достичь этого достаточно легко с position: sticky;, но в конце есть третий контейнер, охватывающий оба столбца. Поскольку все три элемента находятся в одной сетке, изображение с position: sticky; перекрывает третий контейнер.

Есть ли способ ограничить изображение первой строкой сетки без использования JS или добавления дополнительных контейнеров?

Пример: https://jsfiddle.net/y27unz9L/ .element-1 - это тот, который я хочу ограничить первой строкой сетки. 

<div class="grid-container">
  <div class="element-1"></div>
  <div class="element-2"></div>
  <div class="element-3"></div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2em;
  align-items: start;
}

.element-1 {
  min-height: 10vh;
  grid-row: 1;
  grid-column: 1 / 2;
  position: sticky;
  top: 1em;
  background: red;
}

.element-2 {
  min-height: 100vh;
  grid-row: 1;
  grid-column: 2 / 3;
  background: blue;
}

.element-3 {
  min-height: 100vh;
  grid-row: 2;
  grid-column: 1 / 3;
  background: yellow;
}

Ответы [ 2 ]

1 голос
/ 29 марта 2019

Хммм. Я бы хотел, чтобы элемент-1 был клеткой и что-то вставил в нее. Как это https://jsfiddle.net/7pcr8fvz/.

<div class="element-1">
  <div class='sticky'>
  </div>
</div>

.element-1 {
  grid-row: 1;
  grid-column: 1 / 2;
  align-self: stretch; //so it's 100% of the available height
}
.element-1 .sticky {
  position: sticky; //make this element sticky
  top: 1em;
  background: red;
  height: 10vh;
}

Проблема с клейкостью .element-1 заключается в том, что она связана с сеткой. Если вы сделаете ребенка липким, ребенок позиционируется относительно .element-1.

1 голос
/ 29 марта 2019 

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2em;
  align-items: start;
}

.element-1 {
  min-height: 10vh;
  grid-row: 1;
  grid-column: 1 / 2;
  position: sticky;
  top: 1em;
  background: red;
}

.element-2 {
  min-height: 100vh;
  grid-row: 1;
  grid-column: 2 / 3;
  background: blue;
}

.element-3 {
  min-height: 100vh;
  grid-row: 2;
  grid-column: 1 / 3;
  background: yellow;
  position: sticky;
}
<div class="grid-container">
  <div class="element-1"></div>
  <div class="element-2"></div>
  <div class="element-3"></div>
</div>
...