Image sizing within a grid CSSHTML

[lenalflux]

Hello,

I am following along with this topic

How to create an image gallery with CSS Grid

I have copied the code exactly yet my grid looks different.

In particular my images are not not aligned with the grid lines. They are kind of floating in the center as if the images had padding around them. I have inspected the page and there is no padding.

Can someone tell me what I am missing?

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="stylesheet" href="photoGallery.css" />

<title>PhotoGallery Assignment</title>

<div class="gallery">

  <figure class="gallery__item gallery__item--1">

    <img

      src="https://source.unsplash.com/collection/190727/800x600?1"

      class="gallery__img"

      alt="Image 1"

    />

  </figure>

  <figure class="gallery__item gallery__item--2">

    <img

      src="https://source.unsplash.com/collection/190727/800x600?2"

      class="gallery__img"

      alt="Image 2"

    />

  </figure>

  <figure class="gallery__item gallery__item--3">

    <img

      src="https://source.unsplash.com/collection/190727/800x600?3"

      class="gallery__img"

      alt="Image 3"

    />

  </figure>

  <figure class="gallery__item gallery__item--4">

    <img

      src="https://source.unsplash.com/collection/190727/800x600?4"

      class="gallery__img"

      alt="Image 4"

    />

  </figure>

  <figure class="gallery__item gallery__item--5">

    <img

      src="https://source.unsplash.com/collection/190727/800x600?5"

      class="gallery__img"

      alt="Image 5"

    />

  </figure>

  <figure class="gallery__item gallery__item--6">

    <img

      src="https://source.unsplash.com/collection/190727/800x600?6"

      class="gallery__img"

      alt="Image 6"

    />

  </figure>

  <figure class="gallery__item gallery__item--7">

    <img

      src="https://source.unsplash.com/collection/190727/800x600?7"

      class="gallery__img"

      alt="Image 7"

    />

  </figure>

  <figure class="gallery__item gallery__item--8">

    <img

      src="https://source.unsplash.com/collection/190727/800x600?8"

      class="gallery__img"

      alt="Image 8"

    />

  </figure>

  <figure class="gallery__item gallery__item--9">

    <img

      src="https://source.unsplash.com/collection/190727/800x600?9"

      class="gallery__img"

      alt="Image 9"

    />

  </figure>

</div>

.gallery { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 5vw); grid-gap: 15px; } .gallery__img { width: 100%; height: 100%; object-fit: cover; }

[khaonlaakni]

Hi! So first of all, it would be better if you shared a link to your code or used the symbol ` three times to format your text as code. You can also use the direct code format button.

Next, I think the problem is because you haven’t applied all the CSS styles. The tspecifies code for each figure class which you haven’t included in your question. So try applying them and the rest of the CSS.

[lenalflux]

Hi! Thank you for your feedback! Here is a link to my code, I hope this works, I am so new at this!

lenalflux/csshtmlHelp/blob/main/gridGalleryTutorial

while following along it seems like the photos should take up all of their grid placement space. The guide says " by default grid items are laid out according to the grid auto placement rules".

I had to take a long break. I will try to finish to the assignment again and see if it ends up looking correctly in the end.

[lenalflux]

I found the code on the bottom of the page has resolved my issue. The pseudo class at the top of the css sheet overrides the def. browser setting.

I thought I would see this happening when using dev tools but I guess not.

I still feel pretty confused but I guess that is normal. Thanks again… Cheers.