How to create a brand logo grid

I am a web developer from Greece, working mostly with Laravel.
Search for a command to run...

I am a web developer from Greece, working mostly with Laravel.
No comments yet. Be the first to comment.
Hello. Today I'm making a simple slideshow using cool CSS and JS features. I'm gonna be using: CSS variables CSS transformations CSS functions CSS grid JS Proxy The HTML <div class="slideshow"> <div class="slides-container"> <div class="slid...

When creating a multilingual web page you might need to handle languages written from right to left. This comes with some design issues. First, you must add the dir attribute to your root (<html>) element. But the dir attribute alone cannot tackle ev...

Hello again. In this post, I'm going to share a thought I had. For the last six months, I've been struggling with not-so-interesting work. It was some things that I had to do that were so boring I almost believed that I didn't like my job anymore. I ...

When we need to show a list of items, such as products in a product list page, we have the following two css alternatives: display: grid display: flex I will demonstrate both here and I will explain why I choose one over the other. Usually, we have...

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;
}