Your grid layout doesn't have to be boring

Say that you're listing your products in an e-shop. Three in a row, all nicely aligned to a grid. You want even gaps between your items, line wrapping for an undetermined amount of items, etc. And you don't want it to look boring.

The basic layout

Starting with the first set of requirements, the CSS grid makes this ridiculously easy:

.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
}

And with 5 items we get this:

The CSS grid is truly an impressive piece of engineering. But it does look a little bit boring, doesn't it?

The exciting layout

We could build a complicated grid and have the items span different rows and columns. However, I'd just like to make everything a bit more exciting while keeping the simple 3-column layout.

The trick is to adjust the grid item size using padding:

Padding gives you full control over the final shape of the grid item "container" in all 4 directions:

.products {
  /* same */
}

.products__item:nth-of-type(1) {
  padding: 4rem 0 0 0;
}
.products__item:nth-of-type(2) {
  padding: 0 4rem 0 0;
}
.products__item:nth-of-type(3) {
  padding: 0 0 4rem 0;
}
.products__item:nth-of-type(4) {
  padding: 0 0 0 4rem;
}
.products__item:nth-of-type(5) {
  padding: 0 0 4rem 0;
}

And this is just the beginning:

• You can try dynamically setting the paddings for a different look every time the page loads
• You can mix-and-match this technique with adding margins and/or transforms for full craziness

See how much difference it makes in this interactive demo. I'll keep exploring and adding additional ideas here.

All done

It doesn't take much to make the boring grid visually more appealing. Let me know on Twitter if you have any more ideas about interesting grid layouts!