Мое изображение и абзац расположены неправильно

Question

Я пытаюсь создать макет ниже, используя CSS Grid. Однако мое изображение и абзац расположены неправильно.

При запуске моих HTML и CSS:

1. В верхней части моего изображения есть пробелы и
2. Мой абзац расположен в самом низу

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

* {
  margin: 0;
  padding: 0;
}


.grid {
  display: grid;
}


h1, h2, p {
  grid-column: 1;
}

img {
  grid-column: 2;
  width: 100%;
}

<div class="grid">
  <h2>Subtitle</h2>
  <h1>Title</h1>
  <img src="https://images.unsplash.com/photo-1593986338340-6f7361d756da?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=881&q=80">
  <p>Just some paragraph text...</p>
</div>

Answer 1

Похоже, вы пытаетесь делать несколько вещей одновременно. Это не сработает.

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

.grid {
  display: grid;
}

.first-column {
  grid-column: 1;
}

.first-column-content {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 100%;
}

img {
  grid-column: 2;
  width: 100%;
}

<div class="grid">
  <div class="first-column">
    <div class="first-column-content">
      <div class="header">
        <h2>Subtitle</h2>
        <h1>Title</h1>
      </div>
      <div class="footer">
        <p>Just some paragraph text...</p>
      </div>
    </div>
  </div>

  <img src="https://images.unsplash.com/photo-1593986338340-6f7361d756da?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=881&q=80">
</div>