sample-code

Gallery Examples with Flexbox and CSS Grid

1. Simple Flexbox Gallery

Demo

Activities

1. This above gallery uses square Lorem Picsum images. Refactor the design using your own relatively linked images. If you don’t have any images, you may use the animal images provided in the assets directory.
2. Make the above gallery more semantic: refactor the images to include figure and figcaption elements.

2. Advanced: Masonry Gallery with Flexbox

Demo

Source: Adaptive Photo Layout with Flexbox

Activities

1. Deploy the above Demo to GH Pages and test the design on your phone. Does the design break? If so, how? Follow the source article listed above to add support for mobile devices.

3. Simple Gallery with CSS Grid

Demo

Activities

1. The above gallery does not support mobile devices. Using one or more media queries, layout the images in a single column on mobile devices.

4. Advanced: Auto-sized Gallery with CSS Grid

Demo

Activities

1. TBA