DEV Community

Discussion on: 3 Popular Website Heroes Created With CSS Grid Layout

Collapse
vbudovski profile image
Vitaly Budovski

Great article, Stephanie! I tried to extend your example with webp inside a picture element, but I broke it horribly. I find that I have to set a height on the picture element in order to prevent overflow. Open to better suggestions!

  picture {
    height: 71vh;
    max-height: 600px;

    text-align: right;
  }

  img {
    object-fit: cover;
    object-position: 5vw 0;
    width: 80%;
    height: 100%;
    transition: 180ms width ease-in;

    @media (min-width: 60rem) {
      width: 60%;
    }
  }
Collapse
vbudovski profile image
Vitaly Budovski • Edited

Answering my own question. A couple of important things to note about the working code. You need to set grid-auto-flow: column to be able to align the hero image on the right, as well as img height and width set to 100% in order to get it to fill the entire picture element.

  picture {
    display: grid;
    grid-auto-flow: column;
    justify-self: end;
    object-fit: cover;
    width: 80%;
    height: 100%;
    transition: 180ms width ease-in;

    @media (min-width: 60rem) {
      width: 60%;
    }
  }
  img {
    object-fit: cover;
    justify-content: end;
    height: 100%;
    width: 100%;
  }