Search code examples
htmlcsscss-grid

CSS GRID : Default row and column gap gets added

I just want to place the images side-by-side without any space in row and columns. For that, I used CSS Grid. Problem is, after it has been added, their is a default column and row gap added.

I will attach my code below for your view :

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

I will attach the codepen link of my output :

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

Solution

  • There's some margin in your <figure>. You can see it by inspecting it.

    Just add the following CSS:

    figure {
  padding: 0;
  margin: 0;
}