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

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

  1. 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

    1. 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

    2. 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

      1. 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

  2. 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

    --
    Rosen sind rot.
    1. @@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 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. 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

        --
        Rosen sind rot.
        1. @@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 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    2. 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

      1. 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

        --
        Rosen sind rot.