Grids nested in Flexbox --- Eine simple Anfängerfrage

[einsiedler]

Grids nested in Flexbox --- Eine simple Anfängerfrage

Ich fange mit dem lernen mal ganz einfach an:

Ausgangspunkt ein <main> das eine flexbox ist darin nebeneinander 3 Grid-Zellen eingebunden.
So hab ich es gemacht:

@media all {
		header, nav, main, aside, footer, article, figure, figcaption, audio, video {
			display: block;
		}
		*, *:before, *:after {
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		
		body {
			margin: 0;
			padding: 0;
			margin: 0 auto;
			width: 95%;
		}
		
		/* ------------------------- */
		/* START  MAIN cardbox */
		
		#cardbox
		{
			display: flex;
			align-items: flex-start;
			border: 3px dotted #694486;
		}
		
		#cardbox > section
		{
			padding: 0.3rem;
			background: hsl(0, 80%, 40%);
			color: white;
			height: 100%;
			flex: 1;
		}

		#cardbox
			{
				display: grid;
				grid-template-columns: repeat(3, auto);
				grid-gap: 0.3rem;				
			}
			
		#cardbox > section
		{
			display: inline-block;
		}
		
		#cardbox > section
			{
				background-color: #694486;
				color:#fff;
				padding: 10px;
				border-radius: 5px;				
			}
}

Und mein html:

<main id="cardbox" tabindex="-1">
		<section class="card1">
				Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. 
				»Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, 
				fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.
		</section>
		<section class="card2">
				Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. 
				»Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, 
				fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. 
		</section>
		<section class="card3">
				Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. 
				»Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, 
				fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.
		</section>

So Beispiel hier: Beispielseite

Doch nun mein Problem:

Sobald Text in der section-box ist, der unter Umständen auch länger ist,
gehen die grid-Elemente über der flexbox hinaus,
ab einem Punkt wenn man das Bildschirmfenster zusammenschiebt.

WARUM ist das so, das dürfte doch eigentlich nicht so sein oder?
Was ist nun zu machen?
was fehlt mir noch???

Der einsiedelnde

[MrMurphy1]

Hallo

Entweder Flexbox oder CSS Grid. Mit display: grid überschreibst du display: flex. Im main-Element werden alle direkten Kindelemente damit mit CSS Grid angeordnet.

Gruss

MrMurphy

[einsiedler]

Ja eben, das ist auch meine Absicht.
So möchte ich die einzelnen "CARDS" bilden...

Dennoch überragen die grid-Elemente die flexbox.

Ich habe bisher nur eine Demo gefunden wo innerhalb eines grid Elements einzelne Elemente
mit flexbox "positioniert" werden. Siehe: http://labs.jensimmons.com/2017/03-009.html
Das ist wohl eine üblichere Praxis auf diesem Wege.

Der einsiedelnde

[einsiedler]

Auch bei meiner Layout - Idee ragen die grid - Elemente
rechts darüber - hinnaus.

Siehe: DEMO - Layout Beispiel

Würdet ihr sagen das das Layout zu komplex für soetwas wäre,
oder wie würdet ihr soetwas lösen.
Meine Idee ist es das die einzelnen Items im <main> die "ideale"
Eigenschaften von grid einnehmen, also das sie so "umbrechen"!

Der einsiedelnde

[MrMurphy1]

Hallo

Wie ich bereits schrieb: Entweder CSS Grid oder Flexbox. Beides auf ein Element angewandt funktioniert nicht.

also das sie so "umbrechen"

Bei CSS Grid bricht ohne Media Queries nichts um. Wenn das längste Wort (in deinem letzten Beispiel wohl "Forschungsreisenden" die gesamte verfügbare Breite einnimmt werden die Spalten nicht mehr schmaler.

Wahrscheinlich erwartest du von CSS Grid Wunderdinge, die damit überhaupt nicht möglich sind.

CSS Grid wird aktuell leider völlig überbewertet. In der Praxis hat es viele Nachteile, die in der CSS Grid-Euphorie vollkommen übersehen werden.

Am besten beschreibst du genauer, was du überhaupt erreichen willst, also wie sich die Seite bei unterschiedlichen Breiten verhalten soll.

Gruss

MrMurphy

[Matthias Apsel]

Hallo einsiedler,

@media all {
		header, nav, main, aside, footer, article, figure, figcaption, audio, video {
			display: block;
		}
		*, *:before, *:after {
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		
    /* alle weiteren Deklarationen */
}		

Einige Hinweise zu deinem CSS unabhängig von deiner Frage.

• Es ist nicht notwendig, das gesamte CSS von einer Medienabfrage abhängig zu machen, die sowieso für alle Medien gelten soll. Das ist ungefähr so, als sagtest du: „Kauf mir bitte ein Eis, aber nur wenn heute ein Tag ist“

• Das Vorstellen der unbekannten Elemente machst du hauptsächlich für IE < 8, aber da der keine Mediaqueries kennt, ist es nicht unwahrscheinlich, dass der überhaupt keine CSS-Regel zu Gesicht bekommt.

• Browser, die box-sizing mit Präfix brauchen, sind ausgestorben.

• Pseudoelemente werden mit zwei Doppelpunkten gekennzeichnet, *::after ist dasselbe wie ::after

• Es ist nicht sinnvoll, zu versuchen die Seite in allen Browsern gleich aussehen zu lassen. Ebenso ist es vertane Zeit für IE8 ein Grid nachbauen zu wollen.

Dein CSS wird also

*, ::before, ::after {
  box-sizing: border-box;
}

besser noch

html { 
  box-sizing: border-box; 
}
*, ::before, ::after { 
  box-sizing: inherit; 
}

falls du verschiedene Werte für border-box verwenden möchtest. Unter Berücksichtigung der IE < 13 könnte auch

html { 
  box-sizing: border-box; 
}
*, ::before, ::after { 
  box-sizing: border-box;
  box-sizing: inherit; 
}

sinnvoll sein, da diese inherit nicht kennen.

---

Interessehalber: Warum musst du an allen möglichen und unmöglichen Stellen einen Zeilenumbruch setzen?

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

besser noch …

html { 
  box-sizing: border-box; 
}
*, ::before, ::after { 
  box-sizing: border-box;
  box-sizing: inherit; 
}

Inwiefern wäre das nun besser als

*, ::before, ::after { 
  box-sizing: border-box;
}

?

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

@@Matthias Apsel

besser noch …

html { 
  box-sizing: border-box; 
}
*, ::before, ::after { 
  box-sizing: border-box;
  box-sizing: inherit; 
}

Inwiefern wäre das nun besser als

*, ::before, ::after { 
  box-sizing: border-box;
}

Falls man verschiedene Werte für border-box in einem Dokument vererben möchte (hab ich noch nicht gebraucht) und gleichzeitig ältere IE unterstützen will.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Falls man verschiedene Werte für border-box in einem Dokument vererben möchte (hab ich noch nicht gebraucht) und gleichzeitig ältere IE unterstützen will.

Das eine schließt das andere aus.

Wenn du doch mal das Box-Modell ändern willst, was dann? Entweder

html { 
  box-sizing: content-box; 
}
*, ::before, ::after { 
  box-sizing: border-box;
  box-sizing: inherit; 
}

ohne Unterstützung alter IE oder

html { 
  box-sizing: content-box; 
}
*, ::before, ::after { 
  box-sizing: content-box;
  box-sizing: inherit; 
}

mit unnützem doppeltem Pflegeaufwand.

LLAP 🖖

[MrMurphy1]

Hallo

Es ist nicht notwendig, das gesamte CSS von einer Medienabfrage abhängig zu machen

Aber sinnvoll um die CSS-Angaben durchgehend strukturiert und sortiert zu erstellen. Nur weil du dein CSS anders erstellst gibt es keinen Grund dieses Vorgehen negativ darzustellen.

Das Vorstellen der unbekannten Elemente machst du hauptsächlich für IE > 8

Zumindest der IE 11 braucht diese Angaben noch und kann mit Media Queries umgehen. Wenn der IE 11 noch unterstützt werden soll ist die Angabe auch heutzutage durchaus sinnvoll.

Bei neueren IE kann ich das mangels Browser leider nicht prüfen.

Gruss

MrMurphy

[Matthias Apsel]

Hallo MrMurphy1,

Es ist nicht notwendig, das gesamte CSS von einer Medienabfrage abhängig zu machen

Aber sinnvoll um die CSS-Angaben durchgehend strukturiert und sortiert zu erstellen.

Das verstehe ich nicht. Warum ist es sinnvoll, ein "mache immer" davor zu schreiben?

Bis demnächst
Matthias