12. November 2023

So kannst du Logos auf einer Website gleichmäßig darstellen

Endlich habe ich die ultimative Lösung gefunden um Logos auf einer Website darzustellen.

Viele Jahre habe ich mit „float“, „margin“, Spacern & Background-Images gearbeitet und das Ergebnis war nicht immer zufriedenstellend. Die CSS-Eigenschaften „display: grid“, „gap“ & „aspect-ratio“ sind hier echte Game-Changer.

Mit folgendem Code kannst verschiedenste Logo – egal hoch Hoch oder Querformat – gleich groß in einem gleichmäßigen, geordnetem Raster darstellen.

<div class="logogrid">
<a href="#"><img src=".../logoipsum-289.svg"></a>
...
</div>

<style>
.logogrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 20px;
}

.logogrid img{
  object-fit: contain;     
  padding:20px;
  background-color: #fff;
  aspect-ratio: 16 / 9;
  width:100%;
}
</style>Code-Sprache: JavaScript (javascript)

display: grid;
Mit „display: grid;“ wird erreicht, dass die Logos in gleichmäßigen Spalten dargestellt werden.

grid-template-columns: repeat(3, 1fr);
Hiermit wird die Anzahl der Spalten definiert. Mit dem entsprechenden Media-Query kann die Anzahl der Spalten ganz einfach geändert werden. (z.B. mobil nur 2 Spalten und auf großen Screens 5 Spalten)

gap: 20px;
Mit „gap“ wird die Lücke zwischen den Logos definiert. Das coole an dieser Lösung ist, dass die Logos trotzdem rechts und links bündig an den Container anschließen. Das ist mit „margin & padding“ nicht so leicht zu erreichen.

aspect-ratio: 16 / 9;
Mit „aspect-ratio“ wird das Seitenverhältnis des Logos defininert. Hiermit wird sichergestellt, dass alle Logos gleich groß sind.

object-fit: contain;
Mit „object-fit: contain;“ wird sichergestellt, dass das komplette Logo zu sehen ist, unabhängig davon in welchen Seitenverhältnis das Logo im Original ist.