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!
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.
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!
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.