How it works
Put one logo per line in the Content panel: an image URL or a file name, then
| Company name for the alt text. Or use Add images… to preview your files
straight from your computer. Nothing is uploaded; the code keeps the file names.
Logos come in all proportions. Equal 16:9 tiles with Contain keep every logo whole and give them the same visual weight. On phones the example drops to rows of three. To style the tiles yourself, turn off Demo styles and the code contains only the layout.
The code
This is the HTML + CSS the generator above produces for this layout (Compact mode). Change the items, the rows or the class name and copy your own version. Named areas and row wrappers are one click away.
<style>
.logos-grid {
display: grid;
grid-template-columns: repeat(10, minmax(0, 1fr));
gap: 1rem;
justify-items: center;
}
.logos-item {
grid-column: span 2;
box-sizing: border-box;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 0.75rem;
padding: 0.5rem;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: #f1f5f9;
color: #0f172a;
font-weight: 600;
font-size: 0.85rem;
}
.logos-item img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
@media (min-width: 600px) {
/* Where each row starts; the other items flow after it */
.logos-grid > :nth-child(6) { grid-column: 2 / span 2; }
.logos-grid > :nth-child(10) { grid-column: 3 / span 2; }
}
@media (max-width: 599.98px) {
.logos-grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
</style>
<div class="logos-grid">
<div class="logos-item"><img src="logo-1.svg" alt="Northwind"></div>
<div class="logos-item"><img src="logo-2.svg" alt="Contoso"></div>
<div class="logos-item"><img src="logo-3.svg" alt="Fabrikam"></div>
<div class="logos-item"><img src="logo-4.svg" alt="Initech"></div>
<div class="logos-item"><img src="logo-5.svg" alt="Umbrella"></div>
<div class="logos-item"><img src="logo-6.svg" alt="Globex"></div>
<div class="logos-item"><img src="logo-7.svg" alt="Hooli"></div>
<div class="logos-item"><img src="logo-8.svg" alt="Vandelay"></div>
<div class="logos-item"><img src="logo-9.svg" alt="Wonka"></div>
<div class="logos-item"><img src="logo-10.svg" alt="Stark"></div>
<div class="logos-item"><img src="logo-11.svg" alt="Acme"></div>
<div class="logos-item"><img src="logo-12.svg" alt="Tyrell"></div>
</div>