Ein Raster aus Logos in Quadraten

Wir bauen ein buchstäbliches Raster aus Quadraten, und wir platzieren die Logos einiger Zeitschriften zentriert in jedem Quadrat. Ich stelle mir vor, dass viele von Ihnen schon einmal ein Logo-Raster erstellen mussten. Sie können es sich wahrscheinlich schon vorstellen: ein Bereich einer Website, der Spender, Sponsoren auflistet oder der all die großen, schicken Unternehmen zeigt, die ein bestimmtes Produkt verwenden. Die Logos in Quadrate zu setzen, ist eine gute Methode, um damit umzugehen, da es eine klare Struktur erzwingt, wenn Logos unterschiedliche Größen, Seitenverhältnisse und visuelle Gewichte haben, was umständlich und unordentlich aussehen kann.

Mit "Raster" meine ich CSS-Grid. Das Einrichten eines Rasters aus (flexiblen) Quadraten ist ein kleiner Trick für sich. Dann werden wir diese Logos so hineinlegen, dass sie die richtige Größe haben und zentriert sind. Am Ende werden wir uns eine kleine Eigenart ansehen.

1) Raster-Markup

Haben Sie das schon einmal in einem Editor ausprobiert, der Emmet unterstützt?

.grid>div*5>img

Drücken Sie dann **Tab**. Es wird erweitert zu

<div class="grid">
  <div><img src="" alt=""></div>
  <div><img src="" alt=""></div>
  <div><img src="" alt=""></div>
  <div><img src="" alt=""></div>
  <div><img src="" alt=""></div>
</div>

Nur ein kleiner Trick, um schnell zu arbeiten.

2) CSS Grid-Grundlagen

Wir verwenden die berüchtigte Technik der flexiblen Spalten

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 1rem;
}

Dies gibt uns nicht nur flexible Spalten, sondern auch eine flexible *Anzahl* von Spalten. Denken Sie daran, dass uns die Anzahl der Spalten egal ist – wir bauen nur ein Raster aus Logos zur Anzeige.

Wenn wir jedem dieser Grid-Item-Divs einen Hintergrund und eine erzwungene Höhe geben, würden wir so etwas sehen wie

2) Echte Quadrate erstellen

Anstatt die Grid-Elemente auf eine bestimmte Höhe zu zwingen, verwenden wir einen Trick mit dem Seitenverhältnis. Wir fügen ein leeres Pseudo-Element hinzu mit padding-bottom: 100%;, was bedeutet, dass die Höhe mindestens so groß wie die Breite sein wird.

.grid > div {
  background: black;
  padding: 1rem;
}

.grid > div::before {
  content: "";
  padding-bottom: 100%;
  display: block;
}

Wenn wir die Bilder vorübergehend ausblenden, sehen wir, dass das Raster aus Rechtecken zu einem Raster aus perfekten Quadraten geworden ist

3) Bilder überlagern

Aber *mit* den Bildern darin werden sie ein wenig länglich, weil das Bild im Pseudo-Element sitzt.

Wir brauchen eine Möglichkeit, sie übereinander zu legen. Normalerweise greifen wir bei Techniken mit Seitenverhältnis auf absolute Positionierung zurück, um den Innen-Container zu platzieren und die jetzt seitenverhältnis-getreue Form abzudecken. Da wir aber sowieso schon Grid verwenden, nutzen wir Grid noch einmal, um die Elemente in denselben Bereich zu platzieren

.grid > div {
  /* ... */
  display: grid;
}
.grid > div::before,
.grid > div > img {
  grid-area: 1 / 1 / 2 / 2;
}

Das besagt, dass die Grid-Elemente des Haupt-Grids ebenfalls zu Grid-Containern werden, ohne explizite Zeilen und Spalten, und dann sowohl das Pseudo-Element als auch das Bild in die erste Zeile und Spalte dieses Grids platziert werden. Dies zwingt sie zur Überlagerung und ergibt wieder ein schönes Raster aus Quadraten.

4) Bilder platzieren

Wir fügen für jedes Bild eine ordentliche src ein. Wenn wir sicherstellen, dass die Bilder den Platz ausfüllen (und sich selbst einschränken) mit width: 100%;, sehen wir sie am oberen Rand der Grid-Elemente

Nicht schlecht, aber wir würden sie gerne zentriert sehen. Hier ist ein Trick dafür. Zuerst geben wir ihnen auch height: 100%;, was sie verzerrt

Dann korrigieren wir das mit object-fit!

.grid > div > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

So ist es gut.

Das wird responsiv funktionieren.

5) Eigenartige Dragging-Größe

Das ist (wahrscheinlich) keine große Sache, aber bemerken Sie, wie die Logos aussehen, wenn Sie sie ziehen (wie es ein Benutzer tun könnte, wenn er versucht, eines zu speichern)

Die Bilder sehen so aus, als hätten sie width: 100%; height: 100%; ohne object-fit: contain;.

Hier ist die bisher funktionierende Demo, mit dieser Eigenart

6) Absolute Positionierung stattdessen verwenden

Wenn diese Dragging-Eigenart ein großes Problem darstellt, können wir die Bilder auch einfach absolut innerhalb der Grid-Kinder positionieren.

Hier ist eine Möglichkeit, vorausgesetzt, das Grid-Child-Div ist position: relative;

.grid > div > img {
  position: absolute;
  max-width: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

Und hier ist eine andere

.grid > div > img {
  position: absolute;
  max-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Beides behebt diese Dragging-Eigenart. Hier ist eine Demo

Video

Wenn Sie eine Video-Walkthrough von all dem sehen möchten, hier entlang!