Изображения не выравниваются с использованием сетки CSS

Question

Проблема

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

Вот цель:

Вот как выглядит моя заметка: она значительно больше, она соответствует ширине страницы, поэтому мне нужно уменьшить изображения:

Вот мой HTML:

    <section class="container">
      <div class="second_section_heading">
        <img src="images/squigly.jpg" alt="horizontal squiggly">
        <h1>SEASONALLY INSPIRED</h1>
        <h3>fresh flavors to celebrate each season</h3>
      </div>
      <!--Going to need grid system for this area-->
      <div class="wrapper">
        <div class="photo1"><img src="images/home_seasonal_1.jpg" alt="horizontal squiggly"></div>
        <div class="photo2"><img src="images/home_seasonal_2.jpg" alt="horizontal squiggly"></div>
        <div class="photo3"><img src="images/home_seasonal_3.jpg" alt="horizontal squiggly"></div>
      </div>
    </section>

Вот мой CSS:

.wrapper{
      display:grid;
      grid-template-columns:1fr 2fr 1fr;
      grid-auto-rows:minmax(100px, auto);
      grid-gap:2em;
      grid-row-gap:-2em;
      justify-items:center;
      align-items:center;
    }


.photo1{
      /*align-self:start;*/
      grid-column:1/2;
      grid-row:1/2;
    }

.photo2{
      /*align-self:end;*/
      grid-column:2;
      grid-row:1/2;
    }

.photo3{
      /*justify-self:end;*/
      grid-column:1/3;
      grid-row:2;
    }

Буду признателен за любые рекомендации, спасибо заранее.

Answer 1

Возьмите это в качестве руководства и помните несколько вещей о CSS Grid;когда вы устанавливаете grid-column: 1/3, вы устанавливаете этот элемент, чтобы использовать пространство ДВУХ столбцов, от линии сетки 1 (которая является левой границей сетки), до линии сетки 3 (которая может быть правой границей сетки), если у вас есть два столбца.Вы НЕ говорите, что элемент охватывает столбцы 2 - 3, это не то, как работает CSS Grid;работает по линиям сетки ;Вы можете прочитать больше об этом здесь: Полное руководство по сетке

Если вы хотите, чтобы сетка не охватывала всю ширину, вам следует определить максимальный размер для нее вместо использованияfr единиц для предметов, выбрал максимальную ширину;так как fr будет использовать доли от общего доступного пространства

Но специфическая проблема с изображением не выравнивается, я уверен, что это связано с самим изображением, не использующим доступное пространство или имеющим некоторое свободное пространство наэто то, что делает его не выровненным;попробуйте поставить границы на каждый элемент, чтобы увидеть, где они расположены.

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(100px, auto);
  justify-content: start;
  grid-gap: 10px;
}

.item-1 {
  border: 1px solid red;
}

.item-2 {
  grid-column: 2/5;
  border: 1px solid blue;
}

.item-3 {
  grid-column: span 4;
  border: 1px solid green;
}

img {
  display: block;
}

<div class="wrapper">
  <div class="grid-item item-1">
    <img src="" />
  </div>
  <div class="grid-item item-2">
    <img src="" />
  </div>
  <div class="grid-item item-3">
    <img src="" />
  </div>
</div>