Разъяснение об СSS Grid

Question

Всем привет. Разъясните пожалуйста по верстке с помощью грида такой момент, делаю свой сайт портфолио, была необходимость сверстать секцию проектов с помощью грида, нужно чтобы элементы ссылками на проекты была сеткой 2 Х 2 + "растянутый заголовок", пытался сделать это с помощью таких стилей, как:

grid-template-rows: repeat(2, 1fr)"; grid-template-columns: repeat(2, 1fr);

Но после добавление таких с стилей в id="projects" сетка становится такой:

Если же я добавляю, в класс, такой стиль :

.header-project {
  grid-column: 1 / 3;
}

и

Убираю совсем из id="projects":

grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr);

Тогда происходит выравнивание элементов(но мне кажется это не совсем корректно и не правильно получается), и в целом все смотрится не плохо:

Но все равно в середине, слишком большой отступ между элементами.

Вопросов наверно 3:

Почему не работают grid-template-rows: repeat(2, 1fr)"; grid-template-columns: repeat(2, 1fr);?
Почему работает grid-column: 1 / 3; без связки grid-template-rows: repeat(2, 1fr)"; grid-template-columns: repeat(2, 1fr); я же по сути не разметил сетку;
И как убрать такой большой отступ между колонками проектов?

Всем заранее спасибо за ответы;

Мой код:

#projects {
  background-color: #24587A;
  display: grid;
  border: solid 2px;
  grid-gap: 1em;
}

.header-project {
  grid-column: 1 / 3;
  padding-top: 40px;
  text-align: center;
  font-size: 40px;
  text-decoration: underline;
  color: white;
}

.prewie {
  padding-top: 30px;
  width: 500px;
}

.project-tile {
  justify-self: center;
}

.project-tile h2 {
  text-align: center;
  color: white;
  text-decoration: underline;
}

<section id="welcome-head">
  <h1>Hey I am Ilya</h1>
  <h2>a web developer</h2>
</section>

<section id="projects">
  <header class="header-project">
    <h1>
      These are some of my projects
    </h1>
  </header>

  <div class="project-tile">
    <a href="https://codepen.io/borisovich058/full/bGNzJbg"><img class="prewie" src="http://drive.google.com/uc?export=view&id=1OhNqk1Jrrd_I1yO5bbfW7wy26Zbn3lC-">
      <h2>Tribute Page</h2>
    </a>
  </div>

  <div class="project-tile">
    <a href="https://codepen.io/borisovich058/full/ExjxPWP"><img class="prewie" src="http://drive.google.com/uc?export=view&id=1lvrFqBDmt7e3K_MVMxai-8oqk5GZII7P">
      <h2>Survey Form</h2>
    </a>
  </div>

  <div class="project-tile">
    <a href="https://codepen.io/borisovich058/full/BaNarQL"><img class="prewie" src="http://drive.google.com/uc?export=view&id=1snyn_YZo9R1xSadLyAbYNpOBky9Tnuib">
      <h2>Product Landing Page</h2>
    </a>
  </div>

  <div class="project-tile">
    <a href="https://codepen.io/borisovich058/full/dyoKYMw"><img class="prewie" src="http://drive.google.com/uc?export=view&id=1PdpHI_80IhpNCb6NT9NfwyhwSjf84g0V">
      <h2>Technical Documentation Page</h2>
    </a>
  </div>
</section>

БЛОГ НА HUSL

Разъяснение об СSS Grid

Ответы (0 шт):