Сетка CSS - Линейное размещение

Question

Я уже неделю играю с сеткой CSS, и я пытаюсь создать макет, похожий на Линейное размещение Рэйчел Эндрю.

HTML:

<div class="wrapper">
  <h1 class="box a">Heading</h1>
  <div class="box b">Image</div>
  <p class="box c">Paragraph</p>
</div>

CSS:

body {
  margin: 40px;
}

.wrapper {
    display: grid;
    grid-gap: 10px;
        grid-template-columns: 100px 100px 100px;
        background-color: #fff;
        color: #444;
    }

    .box {
        background-color: #444;
        color: #fff;
        border-radius: 5px;
        padding: 20px;
        font-size: 150%;
    }

    .a {
        grid-column: 1 / 3;
        grid-row: 1;
    }
    .b {
        grid-column: 3 ;
        grid-row: 1 / 3;
    }
    .c {
        grid-column: span 2 ;
        grid-row: 2 ;
    }

Макет полностью меняется, когда я заменяю теги div на h1 и p.

Ожидаемый макет с тегами div

Но когда я использую теги h1 и p, на самом деле это выглядит следующим образом

Фактический макет с тегами h1 и p

Может кто-нибудь объяснить это поведение?

Answer 1

Сброс полей элементов h1 и p сделал свое дело.