Использование CSS Grid с Bootstrap 4 и мой макет ведет себя странно.Если у меня нет тегов <br>между каждым элементом, все помещается в строки

Question

Если я делаю что-то, например, помещаю свое изображение в div или удаляю теги
, расположение всего переходит на действительно странные позиции.Это также затрудняет позиционирование чего-либо.Я не уверен, что я сделал что-то не так с Grid или что происходит.

Вот ссылка на кодовый блок: https://codepen.io/amandathedev/pen/zyEyze

Если вы удалите теги
в этом разделе вы поймете, что я имею в виду:

    <br>
    <h2 id="heading">
      A <strong>modern</strong> approach to beautiful writing.
    </h2>
    <br>
      <img class="photo mx-auto" src="https://bydawnnicole.com/wp-content/uploads/2016/06/image-3-1024x765.jpeg" alt="Hello summer written in modern calligraphy with blended watercolors">
    <br>

Спасибо!

Answer 1

Вы используете

display: grid;

По этой причине элементы внутри располагаются в сетке (осмотрите и наведите курсор на div, чтобы увидеть выделенные области сетки).Помещая тег разрыва, вы просто нажимаете на него внутри того же элемента сетки, оставляя тег разрыва, вы рассматриваете следующее содержимое как содержимое следующего блока сетки.

См. Сетку здесь:

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

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

Если я неправильно понимаю ваш вопрос, пожалуйста, дайте мне знать!