Учитывая это HTML, как я могу создать этот макет, используя CSS Grid?

Question

В моем HTML у меня есть

• один заголовок
• один подзаголовок
• один абзац
• одно изображение

С помощью HTML ниже, как я могу создать макет, показанный на этом рисунке? В настоящее время я пытаюсь использовать сетку CSS для создания этого макета, но все не выравнивается должным образом.

.group {
  display: grid;
  grid-template-areas:
    'h1 img';
    'h2 img';
    'p img';
}

h1 {
  grid-area: h1;
}

h2 {
  grid-area: h2;
}

p {
  grid-area: p;
}

img {
  grid-area: img;
}

<div class="group">
  <h1>Title</h1>
  <h2>Subtitle</h2>
  <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

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

С приведенным выше кодом это будет выглядеть так:

HTML:

 Укажите здесь свой титул  Поместите здесь свои субтитры  Поместите свой абзац здесь