Html: Masonry Layout

CSS: Flexbox fundamentals
Last update: 17 May 12:21
0
Students

In this exercise, you have to make a masonry layout using only flexbox. This type of layout is often created with JavaScript because you have to adjust elements with the same margins regardless of the height of the row elements.

The output of this challenge will be the following layout:

Final view of masonry

Your task is to style the gallery block and gallery-item elements.

Tips

  1. Think about along which axis the elements inside the gallery block should be displayed
  2. You'll need the order property
  3. Use pseudo-class nth-child.
  4. Don't forget that elements can shift

For full access to the challenge you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
900
exercises
2000+
hours of theory
3200
tests