Variable Grid Item Layout

Fill a grid perfectly depending on the number of items, to create varying layouts.

In this demonstration, the collection list might have 1, 2, or 3 items.

See the Code Embed at the bottom of the page for the custom CSS needed to achieve this variable layout.

collaboration illustration

One Item in Collection List

In a single item situation, we'll do 2 x 2 span.

Two Items in Collection List

When two items appear in the list, we'll do 1 x 2 spans.

Three Items in Collection List

In a 3-item situation, we'll do 1 x 2 span on the first item, and 1 x 1 on the others.