Responsive image mosaic With CSS and HTML.

To create a responsive image mosaic:

• Use the display: grid property to create a responsive layout.
• Use grid-row: span 2 / auto and grid-column: span 2 / auto to create items that span two rows or two columns respectively.
• Put grid-row and grid-column styles in the media query to avoid applying them on small screens.

Bonus Tip:

• loading='lazy' attribute is used to make images load lazily — only when they are in the user's field of vision.

Do you have a question ping me via Twitter