html - 为什么图像在 CSS Grid 中溢出？

Question

第一张图片应该占用 3/4 或 2 列的可用空间，其余两张图片将垂直放置在最后一列的右侧。

<div class="wrapper1">
<div class="one">
  <img  width="1200px"height="500" src="https://images.unsplash.com/photo-1459666644539-a9755287d6b0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=279b60ab483a2610d1e7260dc213898c&auto=format&fit=crop&w=828&q=80" alt="pic1">
  </div>


<div class="two">
  <img height="300px" width="600px" src="https://images.unsplash.com/photo-1508182314998-3bd49473002f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=af394daae4bdbc4a95dc2204984b790d&auto=format&fit=crop&w=1350&q=80" alt="pic2">
  </div>
<div class="three">
  <img  height="300px" width="600px"src="https://images.unsplash.com/photo-1516703914899-e8303d01329a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b544282e40e1ddee968dac7188ae9a3e&auto=format&fit=crop&w=1350&q=80" alt="pic3">
  </div>

</div>

/* 这是 CSS 样式 */

.wrapper1{
          display:grid;
          grid-column-gap:1px;
          grid-template-columns:repeat(3,1fr);
          grid-template-rows: 200px; 

        }

        .one{
         grid-column:1/3;

        grid-row: 1;

        }

        .two{
          grid-column: 3;
          grid-row:1;   

        }
        .three{
         grid-column:3;
          grid-row:2;
        }
        .wrapper2{
          display: grid;

        }

Answer 1

您的布局发生了几件事:

1. 您有使用 repeat(3, 1fr) 定义的列，但您也有在 HTML 中定义的每个图像的宽度。由于宽度太大(例如，width="1200px")，fr 单元将没有任何可用空间来分配大多数屏幕尺寸。因此，图像可能会溢出其网格项父项。

2. 您希望最后两张图片垂直堆叠。但是网格容器只有一个明确的行(grid-template-rows: 200px)。这意味着创建的额外行(即，隐式 行)将默认使用 auto 高度创建。

3. grid-column-gap: 1px 有效。问题是图像溢出了它们的网格项父级并覆盖了间隙。

4. 您可能需要重写网格项的 min-width: auto/min-height: auto 默认值，以防止它们收缩小于他们内容的大小(在这种情况下是图像)。这里有更详细的解释:Prevent content from expanding grid items

在不知道有关您的目标的更多细节的情况下，我无法说得更具体。

这是您在 jsFiddle demo 中的代码(添加边框以说明溢出)。