HTML Grids Nebeneinander setzen?

Hey,

ich habe eine Aufgabe, und möchte darin Zwei CSS Grids nebeneinander setzen.

Egal was ich mache es funktioniert einfach absolut garnichts.

Irgendwelche Ideen?

Answer 1

[Mirko Marek]

Hi Till421504,

ein CSS-Grid kann mehrere Kind-Element enthalten, deswegen gehe ich davon aus das du ein Grid meinst mit zwei Elementen die nebeneinander stehen. Das geht ganz einfach. Du erstellst ein Grid-Container worin sich die beiden Elemente befinden. Dann selektierst du mit CSS den Grid-Container. In meinem Beispiel habe ich eine Klasse erstellt namens .grid-container.

.grid-container {
    width: 60%;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

Es wäre aber sinnvoll bei nur zwei Elementen Flexbox zu verwenden. Die Flexbox-Variante würde so aussehen.

.flex-container {
    display: flex;
    gap: 0.5rem;
}


.flex-item {
    flex: 1;
}

Ich hoffe dir hilft meine Antwort weiter.

Woher ich das weiß: Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)

Answer 2

[regex9]

a) Packe beide Elemente in einen Container (section/article/div/o.ä.) und weise dem ein Grid oder ein Flexlayout zu, welches seine Kindelemente nebeneinander positioniert.

b) Vielleicht können auch beide Grids zu einem verbunden werden. Es hängt vom Anwendungsfall ab.