Overview
This demo shows how to use CSS grid to create a responsive gallery of images. MDN has a good guide on grid which can be found HERE. The example below uses 2
types of divs:
- One container div that holds all the gallery items. This div will be styled (using style.css) using it's own class and contain rules for the grid in general.
- A container for each gallery item. These will all use the same class and the style (created using style.css) contains any rules for how individual elements should be displayed within the parent grid.
Some other notes on the design:
- A border is used on the container div to show the boundaries of the container.
- Spacing for each element is controlled using
padding, grid-column-gap, and grid-row-gap rules.
- Images shrink slightly to when cursor is over top using the
transform: scale() and img:hover rules.
- Each of these images could be a link by housing it inside an
a tag.
