# How to create a brand logo grid

In this post I will demonstrate how to create a brand logo grid like the one below:

![Screenshot 2022-10-28 at 02.25.36.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666914811665/cwtLIkb6v.png align="left")

The tricky part of such a grid is the colored gap between the logo tiles.

The solution I came up with, I think is acceptable.
I added a 1px box-shadow to the grid items, and I used the wrapper’s :after element to hide the "border" around the grid

```css
.brand-grid {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  
  // this is the empty space where the lines will go
  gap: 1px;
  
  width: 100%;
  position: relative;
  
  &:after {
    content: '';
    position: absolute;
    // Remove pointer events because
    // this element covers everything.
    pointer-events: none;
    
    // By using negative inset value
    // we make the :after pseudo-element
    // 2px larger than its parent.
    // This is because the lines that we want to hide,
    // overflow the container because they are shadows.
    inset: -2px;
    
    // this 3px box shadow will hide 
    // the overflown lines, and 1 more px.
    box-shadow: inset 0 0 0 3px #fff;
  }
  
}

.item {
  padding: 30px;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 1px #ddd;
}
```

%[https://codepen.io/istavros/pen/JjZoeXW]