图像未使用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的工作方式；它通过 grid-lines 起作用；您可以在这里了解更多信息：A Complete Guide to 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>