HTML/CSS Contentboxen in einem Wrapper

[Goku.]

Hey,

wie bekomme ich das hin, dass ich durch eine Klasse/ID drei Contentboxen in einem Wrapper habe, wie im Beispiel zu sehen ist.

[Fydes]

Hallo,

ich würde es so machen.


LG

[krankheit]

Ich habe es soweit bekommen :
Mich können andere gerne korrigieren bin auch erst neu in der Materie

[type.]

Gib lieber deinem Body einen margin-top (statt dem Wrapper ein Padding zu verpassen), dann bekommst du auf jeden Fall keine Probleme, wenn sich das Layout mal ändern sollte. (:
Ansonsten sieht das für mich nach einer Aufgabe für Grid aus.
Bietet eine einfache Lösung und ist auch wieder flexibel genug um Änderungen einfach einpflegen zu können.

.wrapper {
	
	display: grid; grid-gap: 50px; grid-auto-flow: row;
	grid-template: 600px / repeat( 2, 400px );
	
	padding: 50px;
	width: 950px; height: 1300px;
	
}

#long { grid-column: span 2; }

Beispiel:
Und zum Lernen:

Ich hoffe, das hilft dir weiter. ^—^

[Yasunai]

Originally Posted by type.

Gib lieber deinem Body einen margin-top (statt dem Wrapper ein Padding zu verpassen), dann bekommst du auf jeden Fall keine Probleme, wenn sich das Layout mal ändern sollte. (:
Ansonsten sieht das für mich nach einer Aufgabe für Grid aus.
Bietet eine einfache Lösung und ist auch wieder flexibel genug um Änderungen einfach einpflegen zu können.

.wrapper {
	
	display: grid; grid-gap: 50px; grid-auto-flow: row;
	grid-template: 600px / repeat( 2, 400px );
	
	padding: 50px;
	width: 950px; height: 1300px;
	
}

#long { grid-column: span 2; }

Beispiel:
Und zum Lernen:

Ich hoffe, das hilft dir weiter. ^—^

Ja entweder so, oder, falls du es etwas schöner möchtest, mit Flex-Boxen.
Hier mal ein Beispiel

#wrapper
{
	display: flex;
	justify-content: flex-start| flex-end | center | space-between | space-around | space-evenly;
	flex-wrap: wrap | no-wrap | wrap-reverse;
}

Hier gibt's noch mal Lesefutter:

Vorteil daran ist, dass wenn du den Wrapper später mit prozentualer Größe nimmst, sich der Inhalt automatisch einrückt etc.
Nachteil: Du hast kein Grid, das sich so exakt an das Konstrukt anpasst.

[type.]

Originally Posted by Yasunai

[…] falls du es etwas schöner möchtest, mit Flex-Boxen.

Naja… Flexbox hat m.M.n. auch den Nachteil, dass es eigentlich darauf ausgelegt ist eindimensional zu funktionieren. Klar, man kann da auch ohne Probleme mit flex-wrap was zaubern, aber Grid ist eben von Natur aus zweidimensional.
Ich denke aber, dass hier einfach auch die Vorlieben des Coders einen großen Einfluss haben. Fakt ist, dass theoretisch beide Lösungsansätze funktionieren. (:

Originally Posted by Yasunai

Vorteil daran ist, dass wenn du den Wrapper später mit prozentualer Größe nimmst, sich der Inhalt automatisch einrückt etc.
Nachteil: Du hast kein Grid, das sich so exakt an das Konstrukt anpasst.

Naja, man könnte das Grid auch einfach mit Prozentangaben definieren bzw. mit fr-units. Dann passt es sich auch an, wenn der Wrapper sich verändert. :b

[Yasunai]

Originally Posted by type.

Naja… Flexbox hat m.M.n. auch den Nachteil, dass es eigentlich darauf ausgelegt ist eindimensional zu funktionieren. Klar, man kann da auch ohne Probleme mit flex-wrap was zaubern, aber Grid ist eben von Natur aus zweidimensional.
Ich denke aber, dass hier einfach auch die Vorlieben des Coders einen großen Einfluss haben. Fakt ist, dass theoretisch beide Lösungsansätze funktionieren. (:

Das stimmt, aber man könnte sie auch noch kombinieren.

Originally Posted by type.

Naja, man könnte das Grid auch einfach mit Prozentangaben definieren bzw. mit fr-units. Dann passt es sich auch an, wenn der Wrapper sich verändert. :b

Dann ja, aber es war auf dein Snippet bezogen