The style and html in the W3C example were copied adding "r" to elements with names that were common to my existing css, i.e. row becomes rowr
The images on the W3C example are from their website I have taken some from tempusfugit.me/uk/images
What I have tried in this experiment
There doesn't seem to be a limit to the number of images, in this case 27 images (7 + 8 + 6 + 6 = 27). The layout seems to depend on aspect ratio rather than overall size.
Links
- A new page July 2021
- Image Handling - scaling images on reponsive pages
- Responsive Image Grid
- Clearfix - clear child elements automatically without any additional markup
- W3C Resources
- CSS
External Sources