Logo Grid

A responsive grid for logo images (clients, press, partners) separated by fine coloured lines. Columns adapt automatically to the number of logos.

Live example

<div class="logo-grid-container logo-grid-lines-gray">
<div class="logo-grid">
<div class="logo-grid-cell"><img src="/images/Press/Logos/Die_Zeit.png" alt="Die Zeit" loading="lazy"></div>
<div class="logo-grid-cell"><img src="/images/Press/Logos/Handelsblatt.png" alt="Handelsblatt" loading="lazy"></div>
<div class="logo-grid-cell"><img src="/images/Press/Logos/Brand_eins.png" alt="brand eins" loading="lazy"></div>
<div class="logo-grid-cell"><img src="/images/Press/Logos/Le_Monde.png" alt="Le Monde" loading="lazy"></div>
<div class="logo-grid-cell"><img src="/images/Press/Logos/Focus.jpeg" alt="Focus" loading="lazy"></div>
<div class="logo-grid-cell"><img src="/images/Press/Logos/Horizont.png" alt="Horizont" loading="lazy"></div>
</div>
</div>

Line colour classes (add one to the logo-grid-container element):

Class	Colour
`logo-grid-lines-light`	Light gray (default)
`logo-grid-lines-gray`	Medium gray
`logo-grid-lines-preussen`	Teal / cyan
`logo-grid-lines-smaragd`	Emerald green
`logo-grid-lines-himmel`	Sky blue
`logo-grid-lines-meer`	Seafoam
`logo-grid-lines-rubin`	Ruby red
`logo-grid-lines-amethyst`	Purple
`logo-grid-lines-kornblume`	Deep blue
`logo-grid-lines-aprikose`	Peach
`logo-grid-lines-erde`	Olive / earth

The grid adapts its column count automatically; each logo sits in its own logo-grid-cell.