Блог

Я использую CSS grid для веб-сайта, и в разделе информации у меня есть 2 столбца: слева абзац с информацией, справа изображение.

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

Теперь я избежал проблемы, используя и создавая класс для первого предложения абзаца (делая это предложение похожим на h1), но это похоже на временное решение. Есть ли лучший способ решить эту проблему? Я попробовал 2fr 2fr, все та же проблема, я добавил скриншот того, как это выглядит (я все еще новичок в CSS grid)

 .block1{
    display:grid;
    grid-template-columns: 1fr 2fr; 
    column-gap: 250px;
    background-color: #EFEDE3;
    padding: 150px;

 
  }
  .block1 img{
    justify-self: end;
    border-radius: 5px;
    width: 75%;
  }
  .block1 span {
    font-weight: bolder;
    font-size: 32px;
  }
 

Вы можете попробовать это.

HTML:

 <div class="grid">
    <div class="paragraph">
        <h1>Paragraph</h1>
    </div>
    <div class="imageBox">
        
    </div>
</div>
 

и CSS:

 .grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: 250px;
}

.paragraph {
  border: 1px solid green;
  height: 40vh;
}

.imageBox {
  border: 1px solid red;
  height: 40vh;
}