Masonry Grid

Pinterest style responsive layout. Responsive states snap to the default media query sizes for Evo. Note that the examples below may contain a mix of image styles to demonstrate the different ways of incorporating imagery and text content into the masonry grid. The masonry grid variables can be customized in _evo_variables.scss

Pure CSS Masonry Grid

1 normal lorem ipsum dolor sit amet, consectetur adipisicing elit.

2 image bg fpo lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita adipisci accusantium inventore quidem error veniam at quasi, dolorum corrupti alias recusandae quaerat eaque sit facere laborum ab voluptatum quae nostrum.

3 image-random lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita adipisci accusantium inventore quidem error veniam at quasi, dolorum corrupti alias recusandae quaerat eaque sit facere laborum ab voluptatum quae nostrum.

4 circle color bg fpo lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos eum similique sint vero vitae earum hic labore accusantium ad veritatis dolorum ab, eveniet id ex corporis, beatae omnis, voluptatibus soluta?

5 color bg random lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos eum similique sint vero vitae earum hic labore accusantium ad veritatis dolorum ab, eveniet id ex corporis, beatae omnis, voluptatibus soluta?

6 image bg random lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos eum similique sint vero vitae earum hic labore accusantium ad veritatis dolorum ab, eveniet id ex corporis, beatae omnis, voluptatibus soluta?

7 color bg random lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos eum similique sint vero vitae earum hic labore accusantium ad veritatis dolorum ab, eveniet id ex corporis, beatae omnis, voluptatibus soluta?

8 image bg randome lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos eum similique sint vero vitae earum hic labore accusantium ad veritatis dolorum ab, eveniet id ex corporis, beatae omnis, voluptatibus soluta?

Inverse Masonry Grid

1 normal lorem ipsum dolor sit amet, consectetur adipisicing elit.

2 image bg fpo lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita adipisci accusantium inventore quidem error veniam at quasi, dolorum corrupti alias recusandae quaerat eaque sit facere laborum ab voluptatum quae nostrum.

3 image-random lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita adipisci accusantium inventore quidem error veniam at quasi, dolorum corrupti alias recusandae quaerat eaque sit facere laborum ab voluptatum quae nostrum.

4 circle color bg fpo lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos eum similique sint vero vitae earum hic labore accusantium ad veritatis dolorum ab, eveniet id ex corporis, beatae omnis, voluptatibus soluta?

5 color bg random lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos eum similique sint vero vitae earum hic labore accusantium ad veritatis dolorum ab, eveniet id ex corporis, beatae omnis, voluptatibus soluta?

6 image bg random lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos eum similique sint vero vitae earum hic labore accusantium ad veritatis dolorum ab, eveniet id ex corporis, beatae omnis, voluptatibus soluta?

7 color bg random lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos eum similique sint vero vitae earum hic labore accusantium ad veritatis dolorum ab, eveniet id ex corporis, beatae omnis, voluptatibus soluta?

8 image bg randome lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos eum similique sint vero vitae earum hic labore accusantium ad veritatis dolorum ab, eveniet id ex corporis, beatae omnis, voluptatibus soluta?