ImagesLesson 62Free preview

Image Grid

This lesson is part of How To · All levels

Summary

The image grid arranges several images in a row and column so that the gallery looks neat. The CSS Grid makes it easy to determine the number of columns, distance, and image size. The fine hover effect can be added to give feedback as the user directs the cursor.

Key points

Display: grid activates the two-dimensional grid layout.
Grid-template-columns: repeat(3, 1fr) makes three columns equal in width.
The gaps set the distance between the image intersections.
Object-fit: the cover keeps the image proportions within the cell.
Media queries can reduce the number of columns on a small screen.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.