UI/UX Enhancement: Add Padding/Gaps Between Examples on the Homepage

[Advikkhandelwal]

Description

The current examples grid on the three.js homepage displays the image thumbnails with zero padding or margin between them. This results in a dense layout where the edges of adjacent images run right next to each other, making it visually challenging to distinguish individual examples and leading to a crowded user interface.

Solution

To enhance the visual hierarchy and overall UI/UX, I propose adding a small, consistent gap (padding or margin) between the example thumbnails (the div or container holding the image).

A gap of 4px to 8px would significantly improve the visual separation without wasting too much screen space.

• Target CSS Property: Apply a margin or gap to the elements in the grid container.

• Expected Result: The grid would appear cleaner, more professional, and easier for users to scan and select examples.

Alternatives

---

Additional context

[donmccurdy]

Preview:

grid-gap: 0px

grid-gap: 4px

grid-gap: 8px

[Mugen87]

TBH, I like the zero gap version most. The 4px and 8px versions look like a thick border that feels irritating to me.