CSS GRID: The Default row and column gaps are automatically included

I'm trying to position the images side by side without any gaps using CSS Grid. However, I noticed that there is a default gap between the columns and rows.

Here is the code I used:

<div class="grid-container">
  <figure class="grid_item grid_item-1">
    <img class="grid_image" src="image-url" alt="">
  </figure>
  <figure class="grid_item grid_item-2">
    <img class="grid_image" src="image-url" alt="">
  </figure>
  <figure class="grid_item grid_item-3">
    <img class="grid_image" src="image-url" alt="">
  </figure>
  <figure class="grid_item grid_item-4">
    <img class="grid_image" src="image-url" alt="">
  </figure>
  <figure class="grid_item grid_item-5">
    <img class="grid_image" src="image-url" alt="">
  </figure>
  <figure class="grid_item grid_item-6">
    <img class="grid_image" src="image-url" alt="">
  </figure>

</div>

CSS

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

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

You can view my output on Codepen here: Codepen Output

htmlcsscss-grid

Answer №1

There seems to be some extra space in your <figure>. This can be observed through inspection.

To remove this space, simply include the following CSS code:

figure {
  padding: 0;
  margin: 0;
}

Answer №2

Could you kindly update the CSS properties as shown below:

figure img {
  display: block;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Best Practices section of the Chrome lighthouse report has identified an issue with properly defining the charset

I recently noticed an error in my VueJs SPA application when running a Chrome Lighthouse report. The error message indicated that the charset was not properly defined, even though I had added it to my index.html file. Below are screenshots of the issue: ...

htmlvue.jsutf-8character-encodinglighthouse

Adding a caption aligned to the right edge of an image in Wordpress

Any suggestions on aligning an image caption under an image tag to its right hand edge? I attempted using a div, but it seems it's not allowed in WordPress. Can anyone recommend alternative CSS or tags that I could use for this purpose? ...

htmlcsswordpressimagecaption

Tips for ensuring the vertical scroll bar is always visible on a div element

I need help with maintaining a vertical scroll bar on a div regardless of its height. .myclass { overflow-y: scroll; } <div class="myclass"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the in ...

javascripthtmljquerycss

Uniformly allocate space to all table cells

I am facing an issue with the CSS property display: table-cell; and the space between the cells. I want all cells to have dynamically the same width. You can view the code on JSFiddle. As you can see, the cell titled "Ausstattung & Skizze" is wider t ...

htmlcss

Stop an animation while it is in the hover state

Currently experimenting with CSS3 Animations to create a Panoramic view using only CSS and no JavaScript. I have managed to create a somewhat working demo: http://www.example.com/images/panoramic/ The concept is simple: when the user hovers over the blac ...

animationcss

Automatic closure of Info Window on Google Maps is not functioning as expected

I have recently developed a map which you can view here. The issue I am facing is that when I click on the layers to see the InfoWindow, they do not automatically close when I click on another layer. The JavaScript code I am using is causing this problem. ...

javascripthtmlgoogle-maps

Having trouble with jQuery in Blogger?

I'm having trouble installing a Facebook slider tab on a friend's blog and I can't seem to get it to work. Here's the link to her blog: And here's the tutorial I'm following: jQuery is already installed on the blog (you can ...

javascriptjqueryhtmlcssfacebook

Bootstrap's square-shaped columns

I would like to implement a grid of squares for navigation purposes. By squares, I mean that the colored areas should have equal width and height. Currently, I have achieved this using JavaScript, but I am interested in a CSS-only solution. My project is ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to have gulp monitor my sass file updates and generate a single css file?

I'm currently working on a project using ASP.NET MVC 5 framework and Visual Studio 2013. In order to automate the process of compiling my sass files and publishing them into a bundle.css file, I decided to utilize gulp. Here are the steps I took: I ...

cssnode.jssassgulp

Begin your journey with Foundation Navigation as it seamlessly transitions from left to right

I am currently working on this navigation: I am trying to modify the behavior of the hamburger menu so that when it is clicked, it slides from left to right instead of its current downward motion. Additionally, I would like to adjust the width of the menu ...

jqueryhtmlcsszurb-foundationnavbar

Mastering the art of utilizing clearInterval effectively

This reset button needs to clear/reset the timer. The issue is that when the user presses the start button more than once, it sets two timers - one from the previous start and one from the current start. I will be using clearInterval to solve this problem ...

javascripthtmlclearinterval

Tips for adjusting arrow alignment in your custom breadcrumbs using Bootstrap 5.2.0

There is an issue with my custom Bootstrap 5.2.0 breadcrumb - the right arrow appears before the end of the breadcrumb's item box when I add one or more items. To demonstrate the problem, I have created a fiddle where you can see the error: .breadcru ...

cssbootstrap-5breadcrumbs

The Jqueryui image link is not displaying the image despite no error being reported

Can anyone help me figure out what I'm missing? I'm currently working with ASP.NET MVC 5 and have downloaded the JqueryUI combined via Nuget package. Despite no error references for css/js files, the close button is still not showing in the ima ...

javascriptjquerycssasp.net-mvcjquery-ui

Having trouble with the numbering system - any suggestions on how to resolve this issue?

I am experiencing an issue with numbering a list .content ol { padding-left: 0px; counter-reset: item; } .content ol > li { display: block; } .content ol > li::before { content: counters(item, ". ") " " ; counter-increment: ...

css

Utilize XML and Javascript to create a captivating donut chart

I am currently experimenting with XML and JavaScript to generate a donut chart. I attempted to implement this JS code. However, I am struggling to create XML that is compatible with the JS. var SCIENCE = 0; var ART = 0; var MATH = 0; $(document).ready ...

javascripthtmlcssxml

When multiple ajax calls are running simultaneously, the loading icon attached to a Table TD can become disordered

Whenever I click on a row in my table to fetch additional data for a drill down report, I want to display a loading icon on that row until the data is retrieved. However, if I click on a second row before the first row's data is loaded, the loading ic ...

javascriptjqueryhtmlajax

Creating custom style sheets in Smarty

The formatting of a template processed in Smarty is being lost Previously (viewed in notepad++): <!DOCTYPE html> <html lang='ru'> <head> Now (displayed in the browser): <!DOCTYPE html><html lang='ru'&g ...

phphtmlsmarty

What's the best way to align grid items that are positioned next to each other in CSS Grid?

I'm having trouble aligning two grid elements next to each other. What I want is for the heading, paragraph, and bottom links to be in one grid element and the image to be in another. When I tried using grid-template-columns: 1fr 2fr;, one element got ...

htmlcsscss-grid

The webpack bundle is causing issues with the HTML's ability to detect my JavaScript function

In my HTML drawer, there is a function that automatically clicks on the first tab when the page loads. However, when I bundle the JS using webpack, I encounter a Uncaught ReferenceError: openTab is not defined error, preventing my openTab function from wor ...

javascripthtmlwebpack

Exploring the width of Bootstrap 5 Tab Pane content

My issue lies with the content width of my tab panels - specifically, it doesn't work well with columns. I am unable to divide a tab-pane as col-md-7 and col-md-5 (refer to the screenshot below). I am unsure of how to resolve this issue. <div clas ...

htmlcssbootstrap-5