Desktop Layout
Multiple images can appear side by side on a large screen.
Example 1: CSS Grid
This section demonstrates CSS Grid. On a large screen, the images are displayed in multiple columns. As the screen becomes smaller, the number of columns decreases so the content remains easy to read.
Tablet Layout
The number of columns can decrease as the screen becomes narrower.
Mobile Layout
Image can stack vertically on a small mobile screen.
Example 2: Flexible Images
The image below uses a maximum width of 100%. This allows the image to shrink when the screen becomes smaller without overflowing the page.
Example 3: Flexbox
This section demonstrates Flexbox. The items are arranged in a row on larger screens and can wrap onto additional lines when there is not enough horizontal space.
HTML
CSS
Javascript