CSS GRID: добавлен разрыв строки и столбца по умолчанию

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

Answer 2

Можете ли вы установить свойства CSS, как показано ниже:

figure img {
  display:block;
}