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

您的布局会发生一些事情：

您使用repeat(3, 1fr)定义了列，但您还可以在HTML中定义每个图像的宽度。由于宽度太大（例如width="1200px"），因此fr单元无法在大多数屏幕尺寸上分配任何可用空间。因此，图像可能会溢出其网格项父项。
您希望最后两个图像垂直堆叠。但是网格容器只有一个显式行（grid-template-rows: 200px）。这意味着默认情况下将创建具有auto高度的其他行（即隐式行）。
grid-column-gap: 1px正在运作。问题是图像溢出了他们的网格项父项并覆盖了这个空白。
您可能需要覆盖网格项上的min-width: auto / min-height: auto默认值，这可以防止它们缩小到小于其内容的大小（在这种情况下是图像）。以下是更详细的说明：Prevent content from expanding grid items

如果不了解有关目标的更多详细信息，我可以更具体。

这里的代码位于jsFiddle demo（添加了边框以说明溢出）。

为什么CSS Grid中的图像溢出？

1 个答案: