Question

我只想将图像并排放置，行和列中没有任何空格。为此，我使用了CSS Grid。问题是，添加后，它们是添加的默认列和行间距。

我将在下面附上我的代码以供您查看：

<div class="grid-container">
  <figure class="grid_item grid_item-1">
    <img class="grid_image" src="https://images.pexels.com/photos/942500/pexels-photo-942500.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
  </figure>
  <figure class="grid_item grid_item-2">
    <img class="grid_image"  src="https://images.pexels.com/photos/942500/pexels-photo-942500.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
  </figure>
<figure class="grid_item grid_item-3">
    <img class="grid_image"  src="https://images.pexels.com/photos/942500/pexels-photo-942500.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
  </figure>
<figure class="grid_item grid_item-4">
    <img class="grid_image"  src="https://images.pexels.com/photos/942500/pexels-photo-942500.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
  </figure>
<figure class="grid_item grid_item-5">
    <img class="grid_image" src="https://images.pexels.com/photos/942500/pexels-photo-942500.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
  </figure>
<figure class="grid_item grid_item-6">
    <img class="grid_image"  src="https://images.pexels.com/photos/942500/pexels-photo-942500.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
  </figure>

</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns : repeat(2,1fr);
}

.grid_image {
  width:100%;
  height:100%;
  object-fit:cover;
}

我将在输出中附加codepen链接：

https://codepen.io/subin_s/pen/KYgxWX

Answer 1

您的<figure>中有一定的余量。您可以通过检查来查看它。

只需添加以下CSS：

figure {
  padding: 0;
  margin: 0;
}

Answer 2

能否请您设置如下的CSS属性：

figure img {
  display:block;
}

CSS GRID：添加默认行和列间隙

2 个答案: