Columns
Boxs can be organized into Masonry-like columns with just CSS by wrapping them in .box-columns
. Boxs are ordered from top to bottom and left to right when wrapped in .box-columns
.

Box title that wraps to a new line, but not in the large screens
This is a longer box with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Box title
This box has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Box title
This box has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Box title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
Group Use box groups to render boxs as a single, attached element with equal width and height columns.

Box title
This is a wider box with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago

Box title
This box has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago

Box title
This is a wider box with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
Deck Need a set of equal width and height boxs that aren’t attached to one another? Use box decks.

Box title
This is a longer box with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago

Box title
This box has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago

Box title
This is a wider box with supporting text below as a natural lead-in to additional content. This box has even longer content than the first to show that equal height action.
Last updated 3 mins ago