K-12 Menu
CSS Functionality Library
Layout Styles and Functionality

Masonry Layout

A masonry layout is a grid layout that creates a dynamic use of vertical space, and lets images with different sizes and proportions fit together geometrically. It's called a masonry layout due to it's similarities to a mason laying bricks. A lot of masonry layouts use Javascript to fit content together, but this can aslo be accomplished with CSS alone. Using some width/height limitations, the correct cropping, and the grid lines provided by onmessage, we can provide a versatile and easily maintained grid layout.

Masonry Grid - One Content Type

Masonry Grid - Multiple Content Types

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac erat ut velit blandit faucibus.

      This is Large Photo 1

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac erat ut velit blandit faucibus.

This is Horizontal Text

Nunc vel hendrerit nibh, at molestie tellus. Nunc pulvinar, purus vel congue suscipit, arcu nibh faucibus leo, a tempus arcu dolor dignissim ligula.

List of 1 items.

  • This is Horizontal List 1

    Arcu nibh faucibus leo, a tempus arcu dolor dignissim ligula.
    Read More

List of 2 events.

List of 2 frequently asked questions.

  • What is Vertical FAQ 1?

    Morbi sed tempor ligula, in cursus metus. Etiam elementum in erat id finibus. Cras eget mollis ipsum. Phasellus sit amet ligula a turpis sodales placerat vitae id tellus.
  • What is Vertical FAQ 2?

    Nullam accumsan est metus, quis sagittis sem sodales eu. Pellentesque orci erat, viverra ac semper a, pretium sed velit.
  • This is Large Download 1
    Integer arcu quam, fermentum ac elit et, ultrices elementum est. Vivamus porttitor imperdiet sapien, at feugiat metus. Vestibulum pellentesque quam in orci dapibus, nec blandit dui facilisis. Fusce luctus vulputate sapien at viverra. Nullam nec convallis nulla, in efficitur urna.

Masonry Grid - Full Width