DEV Community

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

View post

Replies for: 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 h...

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