CSS grid area doesn't work; inspecting shows the areas in the right places, but the images don't follow

Question

I'm trying to make a simple grid with only 3 images. I'm trying to do it with grid-template-areas but it's not working at all. When I inspect the page, the areas are properly named and placed, but not at all the right sizes. Also, the images don't line up with the areas

Here's my html:

And here's the CSS:

img{
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}
.images {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "im3 im1 im1"
                        "im3 im1 im1"
                        "im3 im2 im2";
    margin-right: 20px;
    height:76vh;
    width: 76vh;
}
.image1 {grid-area: im1;}
.image2 {grid-area: im2;}
.image3 {grid-area: im3;}
.image1 img{
    height: 66vh;
    width: 66vh;
}
.image2 img{
    height: 32vh;
    width: 32vh;
}
.image3 img{
    height: 32vh;
    width: 32vh;
}

I've only made a CSS grid one time so it's pretty new to me, does anyone know what's happening?

user_17755777 · Answer

This will fix because direct child of grid container are a tags.

I made some changes in your code.

*,
*::before,
*::after {
  box-sizing: border-box;
}

body{
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-content: center;
  margin:0;
  background-color: bisque;
  font-size: 100px;
}

img{
  display: block;
  max-width: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}
.images {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:"im3 im1 im1"
                      "im3 im1 im1"
                      "im3 im2 im2";
  /* margin-right: 20px; */
  height:76vh;
  width: 76vh;
}
a:nth-child(1) {grid-area: im1;}
a:nth-child(2) {grid-area: im2;}
a:nth-child(3) {grid-area: im3;}

CSS grid area doesn't work; inspecting shows the areas in the right places, but the images don't follow

1 Answers