So erstellen Sie eine Bildergalerie mit CSS Grid

Bildgalerien gemacht von Websites wie Unsplash, Pinterest usw. werden durch Techniken wie die Positionierung oder die Übersetzung des Bildpunktes , die eine sehr mühsame Aufgabe zu tun ist . Mit CSS Grids können Sie die gleiche Funktionalität sehr schnell erreichen .

Beispiel: Oben sehen Sie eine Bildergalerie mit Bildern unterschiedlicher Breite und Höhe, die ein perfekter Anwendungsfall für CSS-Raster ist.

Lass uns anfangen!

Das zugrunde liegende Gitter

Jetzt erstellen wir ein 8x8-Raster . Wir können auch ein Raster in anderen Größen erstellen, dies hängt jedoch von der Art der gewünschten Galerie ab. In unserem Fall ist ein 8x8-Raster ideal.

  • Ein Rastercontainer wird definiert, indem die Anzeigeeigenschaft eines Elements auf das Raster festgelegt wird . Das Div mit dem Klassenraster wird also unser Rastercontainer sein .
  • Wir verwenden die Eigenschaft grid-template-columns , um die Spaltenspuren festzulegen, und grid-template-rows , um die Zeilenspuren festzulegen. Wir deklarieren diese Eigenschaften im Grid-Container. In unserem Beispiel werden wir einen 8x8-Gittercontainer herstellen.
  • Rasterlücke: Definiert die Größe der Lücke zwischen Zeilen und Spalten in einem Rasterlayout. Der Wert für die Rasterlücke kann eine beliebige CSS-Längeneinheit sein. In unserem Beispiel habe ich den Wert 15px angegeben , damit unser Raster besser aussieht .

HTML:

CSS:

.gallery { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 5vw); grid-gap: 15px; }
Hinweis: Die Höhe der Zeilen ist an die Breite des Ansichtsfensters gebunden, sodass die Zellen ihr Seitenverhältnis einwandfrei beibehalten. Wir haben jeweils 8 Zeilen mit einer Höhe von 5 Ansichtsfenstern . Ich habe mit diesen Höhen experimentiert und bin zu dem Schluss gekommen, dass 5% der Breite des Ansichtsfensters die perfekte Größe für die Höhe sind. Dazu setzen wir die Höhe der Zeile auf 5vw (Breite des Ansichtsfensters) . Hinweis: Alle direkten untergeordneten Elemente des Rasters werden automatisch zu Rasterelementen .

Einfügen von Rasterelementen

Jetzt fügen wir die Rasterelemente in den Rastercontainer ein:

Styling von Bildern

.gallery__img { width: 100%; height: 100%; object-fit: cover; }

Das Einstellen Objekt fit Wert Abdeckung ist wie die Einstellung Hintergrund Größe auf Abdeckung für das Hintergrundbild . Wir tun dies, damit das Bild die Höhe und Breite seines Feldes (des Rasterelements) ausfüllen und sein Seitenverhältnis beibehalten kann.

Hinweis: Die Objektanpassungseigenschaft funktioniert nur, wenn wir die Eigenschaften width und height festlegen . Hinweis: Standardmäßig wird die Rasterelemente angelegt sind nach den Raster Auto Platzierungsregeln .

Positionieren von Rasterelementen

Bevor wir mit der Positionierung der Rasterelemente beginnen, werden wir einige grundlegende Konzepte untersuchen.

Das Raster div ist der Rastercontainer , und alle direkten untergeordneten Elemente sind die Rasterelemente . Als wir die Gitterspuren mit Gittervorlagenspalten und Gittervorlagenzeilen definiert haben, hat uns das Gitter nummerierte Linien zur Verfügung gestellt , die als Gitterlinien für die Positionierung der Elemente bezeichnet werden. Sie können auf jede Gitterlinie durch einen numerischen Index verweisen.

Spalten beginnen standardmäßig bei eins , von links nach rechts , und Zeilen beginnen ebenfalls bei eins von oben nach unten . Es sind zwei Gitterlinien erforderlich , um eine einzelne Spalte oder Zeile zu erstellen, eine Zeile auf jeder Seite, sodass unser 8-Spalten- und 8-Zeilen- Gitter besteht

9-spaltige Zeilen und 9-zeilige Zeilen .

Die vertikalen Linien 1 und 2 bestimmen den Start- und Endpunkt der ersten Spalte. Zeilen 2 und 3 die zweite Spalte und so weiter. In ähnlicher Weise bestimmen die horizontalen Linien 1 und 2 die Position der ersten Reihe und die Linien 2 und 3 die zweite Reihe und so weiter. Wenn Sie die oben genannten Konzepte kennen, können Sie besser verstehen, wie wir Elemente (Bilder) in unserem Raster positionieren .

Jetzt verwenden wir Rasterzeilennummern, um zu steuern, wie Elemente platziert werden, indem Eigenschaften direkt auf ein Rasterelement angewendet werden. Wir können festlegen, in welcher Zeile ein Rasterelement beginnt und endet und wie viele Spuren es erweitern soll .

1. Gitterelement

Erstellen wir also eine neue Regel, die auf das erste Rasterelement abzielt. Wir werden zuerst die Eigenschaft grid-column-start verwenden , um die Spaltengitterlinie anzugeben, an der das erste Gitterelement beginnt. Das Gitter-Spaltenende gibt an, wo das erste Gitterelement endet.

Der Startwert für die Rasterspalte ist also eine Zahl, die die Rasterlinie am linken Rand einer Spalte angibt. Der Wert für das Raster-Spaltenende gibt die Rasterlinie an, die den rechten Rand der Spalte markiert.

Wenn Sie im folgenden Beispiel den Start der Rasterspalte auf 1 und das Ende der Rasterspalte auf 3 setzen , erstreckt sich das Rasterelement vom linken Rand der Rasterlinie, Zeile 1 bis Zeile 3 , und füllt 2 Spalten aus . Wir werden auch die Verwendung Raster-Reihe-Start und Raster-Reihe-End - Eigenschaften die zeigen Gitterpunkt Start und Endposition auf der Reihe Gitterlinien in der gleichen Art und Weise , wie wir für die Spalte taten.

.gallery__item--1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; }
Hinweis: Nun werden wir andere Elemente nach denselben Prinzipien positionieren, die wir oben gelernt haben.

2. Gitterelement

.gallery__item--2 { grid-column-start: 3; grid-column-end: 5; grid-row-start: 1; grid-row-end: 3; }

3. Gitterelement

.gallery__item--3 { grid-column-start: 5; grid-column-end: 9; grid-row-start: 1; grid-row-end: 6; }

4. Gitterelement

.gallery__item--4 { grid-column-start: 1; grid-column-end: 5; grid-row-start: 3; grid-row-end: 6; }

5. Gitterelement

.gallery__item--5 { grid-column-start: 1; grid-column-end: 5; grid-row-start: 6; grid-row-end: 9; }

6. Gitterelement

.gallery__item--6 { grid-column-start: 5; grid-column-end: 9; grid-row-start: 6; grid-row-end: 9; }

You can find the complete code below.

         CSS Grids Gallery 

And the CSS:

*, *::after, *::before { margin: 0; padding: 0; box-sizing: inherit; } html { box-sizing: border-box; font-size: 62.5%; } body { font-family: "Nunito", sans-serif; color: #333; font-weight: 300; line-height: 1.6; } .container { width: 60%; margin: 2rem auto; } .gallery { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 5vw); grid-gap: 1.5rem; } .gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery__item--1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; /** Alternative Syntax **/ /* grid-column: 1 / span 2; */ /* grid-row: 1 / span 2; */ } .gallery__item--2 { grid-column-start: 3; grid-column-end: 5; grid-row-start: 1; grid-row-end: 3; /** Alternative Syntax **/ /* grid-column: 3 / span 2; */ /* grid-row: 1 / span 2; */ } .gallery__item--3 { grid-column-start: 5; grid-column-end: 9; grid-row-start: 1; grid-row-end: 6; /** Alternative Syntax **/ /* grid-column: 5 / span 4; grid-row: 1 / span 5; */ } .gallery__item--4 { grid-column-start: 1; grid-column-end: 5; grid-row-start: 3; grid-row-end: 6; /** Alternative Syntax **/ /* grid-column: 1 / span 4; */ /* grid-row: 3 / span 3; */ } .gallery__item--5 { grid-column-start: 1; grid-column-end: 5; grid-row-start: 6; grid-row-end: 9; /** Alternative Syntax **/ /* grid-column: 1 / span 4; */ /* grid-row: 6 / span 3; */ } .gallery__item--6 { grid-column-start: 5; grid-column-end: 9; grid-row-start: 6; grid-row-end: 9; /** Alternative Syntax **/ /* grid-column: 5 / span 4; */ /* grid-row: 6 / span 3; */ }

You can try adding your own CSS to make this gallery look the way you want it to look. You can also create more complex image galleries very easily.

You can learn more about the CSS Grids in the link given below

A Complete Guide to Grid | CSS-Tricks

CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can…css-tricks.com

I hope you’ve found this post informative and helpful. I would love to hear your feedback!

Thank you for reading!