Я не знаю, почему между моим заголовком и описанием столько разницы

Question

Я новичок в CSS сетках и кодировании в целом tbh. Я пытаюсь создать страницу магазина для своего веб-сайта и не могу понять, почему существует такой большой разрыв между моим заголовком и моим описанием в div с классом «title-container».

Заранее спасибо за вашу помощь,

.container {
  display: grid;
  grid-template-rows: minmax(1000px, auto);
  grid-template-columns: 1fr 4fr;
  background-color: red;
}

.sidebar {
  background-color: blue;
}

.product-side {
  background-color: yellow;
}

.title-container {
  display: grid;
  grid-template-rows: minmax(200px, auto);
  width: 95%;
  margin: 0px auto;
  background-color: #000000;
}

.title-container h1,
p {
  color: #ffffff;
}

<div class="container">
  <div class="sidebar"></div>
  <div class="product-side">
    <div class="title-container">
      <h1>Title</h1>
      <p>Description</p>
    </div>
  </div>
</div>

Answer 1

grid-template-rows: minmax(200px, auto); устанавливает ваш контейнер заголовка на высоту 200 пикселей.

Удалите или измените это свойство.

Пример ниже:

.container {
  display: grid;
  grid-template-rows: minmax(1000px, auto);
  grid-template-columns: 1fr 4fr;
  background-color: red;
}

.sidebar {
  background-color: blue;
}

.product-side {
  background-color: yellow;
}

.title-container {
  display: grid;
  grid-template-rows: minmax(60px, auto);
  width: 95%;
  margin: 0px auto;
  background-color: #000000;
}

.title-container h1,
p {
  color: #ffffff;
}

<div class="container">
  <div class="sidebar"></div>
  <div class="product-side">
    <div class="title-container">
      <h1>Title</h1>
      <p>Description</p>
    </div>
  </div>
</div>