Grid Container CSS

html.de-Forum HTML, XHTML & CSS
1

Hallo.
Ich benutze auf unserer webseite eine Galerie, diese habe ich per CSS in Grid optik per css eingestellt
jetzt habe ich folgendes Problem.
Der 1 Container oben links ist leer danach passt die Anzeige. Ich stelle das hier mal dar.
Container 1 (leer) Container 2 (anzeige OK) Container 3 (Anzeige OK
Container 4 (Anzeige OK) Container 5 (Anzeige OK) Container 6 (Anzeige Ok)
und so weiter,
ich habe folgenden css code dafür genutzt

display: grid;
column-gap: 14px;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
justify-content: center;

Hat da jemand eine Ahnung warum das so ist ?

LG und danke

2

Ein Link zur Seite, damit man sich das ansehen kann, würde helfen.

3

Hallo, Die Seite ist leider noch nicht Online da sie im Aufbau ist.

4

Lass mal

align-items: center;
justify-content: center;

weg. Die Anweisungen erscheinen mir überflüssig.

5

passiert leider nichts

6

Wenn nichts passiert hast du uns anderen entscheidenden Code verheimlicht.

7

also es passiert schon was, und zwar ändert er die zentrierung des ganzen containers. Aber es passiert nichts im Bezug auf den erste Container

8

[ATTACH type=„full“]6168[/ATTACH]

9

Solche Angaben helfen leider überhaupt nicht weiter. Wir benötigen den HTML- und CSS-Quellcode.

Verwendest du eventuell ein Content-Management-System oder ähnliche Vorlagen?

10

Es ist ein Plugin das diese Blöcke anzeigt im Normalfall bei dem Theme ist es nur eine Spalte und ich wollte das eben auf 3 Spalten anzeigen lassen

11

kann ich dir den Code zukommen lassen?
hier würde das den Rahmen sprengen :slight_smile:

12

Das kannst du aber ändern, oder?

Und somit schließt du alle anderen aus. :frown:

Und die Frage nach dem CMS hast du auch nicht beantwortet. Wenn ich raten sollte: WordPress

13

Könnte ich, aber dann sehen wahrscheinlich viele menschen die unfertige Seite und das möchte ich ehrlich gesagt nicht.

14

da hast du recht und das möchte ich natürlich nicht.

15

Man kann doch eine Seite z.B. als Subdomain einrichten, dann sehen nur Menschen die Seite, die den Link kennen. Oder in einem Unterverzeichnis einrichten. Also kein Grund, die Seite nicht online zu stellen.

16

Über https://jsfiddle.net z.B., gibt aber noch mehr Dienste in der Richtung.

17

schau ich mir mal an

18

Verweigerst du absichtlich die Antwort?

Bei einem CMS, setzt du ein Galerie-Plugin ein?

19

Wenn die erste Zelle im Grid leer ist, ist im DOM (also das, was der Browser aus deinem HTML macht) möglicherweise ein unerwartetes Element, das dieser Zelle zugeordnet wird, aber keinen Textinhalt hat. Man kann mit grid-rows, grid-columns oder grid-area festlegen, in welche Grid-Zelle ein Element gesetzt wird. Die Kindelemente des Grid-Containers (also das Element, dem Du display:grid gegeben hast), für die das nicht geschieht, werden der Reihe nach in die freien Zellen gesetzt. Das kannst Du sinnvollerweise mit den Entwicklerwerkzeugen des Browsers herausfinden. Leere Elemente können auch entstehen, wenn man Elemente falsch schachtelt. Beispiel: ein

in einem

. Das ist nicht erlaubt, und wenn der Browser das antrifft, beendet er erstmal das

. Die Entwicklerwerkzeuge zeigen das. Und schon stimmt das DOM nicht mehr mit dem überein, was Du für das DOM hältst.

20

natürlich verweiger ich nicht absichtlich eine Antwort.

Es ist ein Galery Plugin, das in dem Theme als ein Block angezeigt wird in einer Spalte, Ich möchte aber 3 Spalten anzeigen lassen. Wie gesagt das funktioniert ja auch ab er 2 zeile. bei der 1 Zeile ist das erste Element leer