html - CSS 网格 : Default row and column gap gets added

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;
}

我将附上输出的代码笔链接:

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

Answer 1

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

只需添加以下 CSS:

figure {
  padding: 0;
  margin: 0;
}