In this post I will demonstrate how to create a brand logo grid like the one below:
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
.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;
}