grid how to remove column mesh

Question

How can I remove vertical column mesh (space) from columns using display grid? Here is the grid layout I'm using:

display: grid;
grid-template-column: repeat(2, 1fr);

I'm getting a space between items in the same row, and I'd like to collapse that space, as shown in the pictures below.

---

Grid Layout

I'd like to go from this:

To this:

Answer 1

This currently doesn't work in grid. You'd need to use flexbox and flex-wrap. Something like this:

.sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 200px;
}

.size {
  background: lightgray;
  border-radius: 1rem;
  padding: 0.5rem 1rem;
}

<div>
  <ul class="sizes">
    <li class="size">X-Small</li>
    <li class="size">Small</li>
    <li class="size">Medium</li>
    <li class="size">Large</li>
    <li class="size">X-Large</li>
    <li class="size">XX-Large</li>
    <li class="size">3X Large</li>
    <li class="size">4X Large</li>
  </ul>
</div>

Eventually, grid will be getting a masonry option that would come close to something like this, but grid isn't the right solution as it keeps things in a grid. flexbox is the way to go.