Можно ли центрировать содержимое столбца на основе другого столбца для сетки?

Question

Я сейчас использую сетку, в левой колонке есть разделы текста.В правом столбце у меня есть изображения.Я столкнулся с препятствиями, когда заставил эту сетку работать быстро, содержимое слева не совпадает с изображениями справа, потому что они находятся в двух разных столбцах.

Можно ли всегда центрировать изображения в зависимости от того, где начинается сечение в левой сетке?Я возился с ручной настройкой отступов, но я бы предпочел найти более эффективное решение, если оно доступно.

https://jsfiddle.net/yhpbc9xL/2/

.container {
  display: grid;
  grid-template-columns: [content] 1fr [images] 1fr;
}

.content {
  grid-column: content;
  background: green;
  overflow: auto;
}

.images {
  grid-column: images;
  padding: 12%;
}

.image-one {
  background: url("http://placekitten.com/g/600/600");
}

.image-two {
  background: url("http://placekitten.com/g/500/500");
}

.image-one,
.image-two {
  height: 25%;
  width: 100%;
  margin-bottom: 12%;
  background-size: 50% auto;
  background-position: 100% center;
  background-repeat: no-repeat;
  background-color: white;
  background-attachment: fixed;
  border: 1px solid red;
}

<div class="container">
  <div class="content">
    <div class="section-one">
      <h2 class="title">SECTION ONE</h2>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.

      </p>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

      </p>
    </div>

    <div class="section-two">
      <h2 class="title">SECTION TWO</h2>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.

      </p>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem
        Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem
        Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem
        Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

      </p>

    </div>
  </div>



  <div class="images">
    <div class="image-one"></div>
    <div class="image-two"></div>
  </div>
</div>

Я ожидаю, что .image-one & image-two в правой сетке будет центрировано .section-one и .section-two в левой сетке.

Answer 1

Проблема в том, что изображения и текстовое содержимое находятся в разных контейнерах - вы можете попробовать это:

• используйте display: contents для content и images, которые по существу теперь являются только семантическими контейнерами, а их внутренние элементы становятся элементами сетки сейчас (или вы можете выбросить свои content и images контейнеры в html),

• поместите элементы section-* в grid-column: content и image-* элементы в grid-column: images,

• добавьте grid-auto-flow: dense, чтобы images в столбце не будет пустых ячеек сетки .

См. демонстрацию ниже:

.container {
  display: grid;
  grid-template-columns: [content] 1fr [images] 1fr;
  grid-auto-flow: dense; /* ensures no empty grid cells */
}

.content,
.images {
  display: contents;
}

.section-one,
.section-two {
  grid-column: content; /* in first column */
  background: lightgreen;
  border: 1px solid green;
}

.image-one {
  background: url("http://placekitten.com/g/600/600");
}

.image-two {
  background: url("http://placekitten.com/g/500/500");
}

.image-one,
.image-two {
  grid-column: images; /* in second column */
  width: 100%;
  background-size: 50% auto;
  background-position: 100% center;
  background-repeat: no-repeat;
  background-color: white;
  background-attachment: fixed;
  border: 1px solid red;
}

<div class="container">
  <div class="content">
    <div class="section-one">
      <h2 class="title">SECTION ONE</h2>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.

      </p>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

      </p>
    </div>
    <div class="section-two">
      <h2 class="title">SECTION TWO</h2>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem
        Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem
        Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem
        Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
    </div>
  </div>
  <div class="images">
    <div class="image-one"></div>
    <div class="image-two"></div>
  </div>
</div>