Das Grid Layout System

.grid-elternelement: Wir bauen uns erstmal ein Grundgerüst mit Spalten

Html:
 <div class="grid-elternelement">
    <div class="grid-header"></div>
    <div class="grid-main"></div>
    <div class="grid-footer"></div>
</div>   
 
 
CSS:
.grid-elternelement div {  <== Div's sichtbar machen
    text-align: center;
    border: 2px solid green;
}

.grid-elternelement {
    display: grid;   <== Elternelement als Grid deklarieren (wirkt sich nur auf die direkten Kinder aus)
    max-width: 100%;
    padding: 10px;
    margin: 20px auto;
    grid-template-columns: auto auto auto; <== Spaltenanzahl festlegen
    border: 2px solid red;
}

Im obigen CSS-Code wird die Spaltenzahl als "auto" angegeben grid-template-columns: auto auto auto;. Das heisst, die Spalten teilen sich den verfügbaren Platz gleichmässig auf.

Das Alles könnte man jetzt sehen wenn ....

... man einen Inhalt für die Div's einfügen würde :-)

Die farbige Umrandung kommt hier nur vom Elternelement mit border: 2px solid green; und den Kindelementen mit border: 2px solid green;

...was ich hiermit auch tue (Inhalt einfügen):

Html:
 <div class="grid-elternelement">
 
    <div class="grid-header">
         <h3>header</h3>
    </div>
    
    <div class="grid-main">
        <h3>main</h3>
    </div>
    
    <div class="grid-footer">
        <h3>footer</h3>
    </div>
    
</div>

grid-template-columns: auto auto auto; Die Spalten teilen sich nun den verfügbaren Platz gleichmässig auf.

Was passiert, wenn ich zusätzlichen Inhalt einfüge?:

Html:
 <div class="grid-elternelement">
 
    <div class="grid-header">
         <h3>header</h3>
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Produkte</a></li>
            <li><a href="#">Über uns</a></li>
            <li><a href="#">Kontakt</a></li>
         </ul>
    </div>
    ......
    ......
</div>

Bis jetzt sieht es noch gut aus :-)

Ich lege nochmal eine Schippe drauf:

Html:
 <div class="grid-elternelement">
 
    <div class="grid-header">
         <h3>header</h3>
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Produkte</a></li>
            <li><a href="#">Über uns</a></li>
            <li><a href="#">Kontakt</a></li>
         </ul>
         <p>
            Lorem ipsum dolor sit amet, consecteturLorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
         </p>
    </div>
    ......
    ......
</div>

Autsch,- das tut weh :-(
Das p-Element macht "Dicke Arme" und "main" und "footer" sind so breit wie ihr momentaner Inhalt.

Was passiert, wenn ich in "main" auch ein "p" reinschiebe?

Aha!..., "main" nimmt die gleiche Breite ein wie "header". Auch bestimmen die Inhalte die Höhe sämtlicher Kästchen in den Spalten.

Der Inhalt des Footers reicht jedoch noch nicht aus, um die gleiche Breite wie die anderen beiden Kästchen zu erreichen.

Ich füttere jetzt "footer" mit noch mehr Text:

So, die Spalten sind jetzt wieder gleich breit

Was habe ich jetzt gelernt?:
Um bei grid-template-columns: auto auto auto; gleiche Spaltenbreiten zu erhalten, muss jedes Kästchen eine Mindestmenge an Inhalt haben. Dies gilt nur für die Breite!
Die Höhe sucht sich der Browser selbst aus.

Spaltenbreiten selbst festlegen mit px und fr:

"1fr" (fraction) bedeutet "eine Fraktion" oder ein Teil des verfügbaren Platzes.

Am Besten sieht man das im nachstehenden CSS-Beispiel und direkt darunter in der Browseransicht.

.grid-elternelement {
    display: grid;
    ...
    ...
    (Erste Spalte 150px und der Rest wird brüderlich geteilt (in 2 Fraktionen))
    grid-template-columns: 150px 1fr 1fr;
}

Die erste Spalte hat 150px und wird ihre Breite niemals verändern.
main und footer teilen den restlichen Platz brüderlich unter sich auf. Das sieht man schön, wenn man die Bildschirmbreite verändert.

Vorteilhaft ist bei 1fr, dass der Footer, trotz minimalem Textinhalt, seine Breite beibehält.

grid-template-columns: 150px 1fr 150px;

.grid-elternelement {
    display: grid;
    ...
    ...
    (Erste Spalte 150px, letzte Spalte 150px und der Rest (1fr) sucht sich den restlichen Platz in der Mitte)
    grid-template-columns: 150px 1fr 150px;
}

Der Übersichtlichkeit wegen habe ich etwas Text herausgenommen.

Explizite und implizite Spalten (wird nicht schlimm!)

• Explizit: ausdrücklich, deutlich
• https://www.duden.de/rechtschreibung/explizit
• Implizit: mit enthalten, mit gemeint, aber nicht ausdrücklich gesagt https://www.duden.de/rechtschreibung/implizit

Was würde denn passieren, wenn ich im Html-Code noch ein DIV ins Elternelement reinschmuggeln würde?

Wir haben ja "explizit" gesagt, dass wir 3 Spalten haben wollen und auch ihre Werte angegeben.
Probieren wir es mal aus :-)

Implizite Grid-Items:

Html:
 <div class="grid-elternelement">
    <div class="grid-header"></div>
    <div class="grid-main"></div>
    <div class="grid-footer"></div>
    <div class="Implizites DIV"></div>
</div>   
 
CSS:
.grid-elternelement {
    display: grid;
    ...
    ...
    grid-template-columns: 150px 1fr 150px; Wir geben explizit nur 3 Spalten an!
}

Das "hereingeschmuggelte" DIV wird nicht in den Spalten aufgenommen und muss an den "Katzentisch".
Das Grid-Layoutsystem erzeugt bei einem impliziten "Grid-Item" (hier unser DIV) eine neue Reihe und fügt es als erstes Element ein.

...und hier die Brutalo-Nummer:

Html:
 <div class="grid-elternelement">
    <div class="grid-header"></div>
    <div class="grid-main"></div>
    <div class="grid-footer"></div>
    <div class="implizites DIV 1"></div>
    <div class="implizites DIV 2"></div>
    <div class="implizites DIV 3"></div>
    <div class="implizites DIV 4"></div>
    <div class="implizites DIV 5"></div>
    <div class="implizites DIV 6"></div>
    <div class="implizites DIV 7"></div>
</div>
<div>Ich bin kein implizites DIV mehr...</div>

 
CSS:
.grid-elternelement {
    display: grid;
    ...
    ...
    grid-template-columns: 150px 1fr 150px; Wir geben explizit nur 3 Spalten an!
}

Ich vermeide implizite "Grid-Items" weil ich sonst den Überblick verliere!

Nur innerhalb von grid-template-columns: benannte Grid-Items benutzen!

Weitere Spaltenformationen: min-content

Html:
 <div class="grid-elternelement">
    <div class="grid-header"></div>
    <div class="grid-main"></div>
    <div class="grid-footer"></div>
</div>   

CSS:
.grid-elternelement {
    ...
    grid-template-columns: 250px min-content 1fr;
}

Weitere Spaltenformationen: max-content

CSS:
.grid-elternelement {
    ...
    grid-template-columns: 250px max-content 1fr;
}

"max-content" ballert die Spalten über das Elternelement raus!? So etwas wollen wir nicht, deshalb: "max-content ist tot!
Es zwingt den gesamten Text in eine einzelne Zeile. Für Irgendetwas wird es schon gut sein....

Weitere Spaltenformationen: fit-content

CSS:
.grid-elternelement {
    ...
    grid-template-columns: fit-content(200px) fit-content(250px) auto;
}

"fit-content": nicht mehr als 300px. Im Gegensatz zu festen 300px schrumpft "fit-content(300px)"
Hinterlässt in unserem Fall aber eine Lücke am Schluss.

Weitere Spaltenformationen: repeat(3, 1fr)

CSS:
.grid-elternelement {
    ...
    grid-template-columns: repeat(3, 1fr);
    Den verfügbaren Platz in 3 gleichgrosse Teile (Fraktionen) aufteilen.
}

Weitere Spaltenformationen: minmax(250px, 500px) 2fr 1fr;

CSS:
.grid-elternelement {
    ...
    grid-template-columns: minmax(250px, 500px) 2fr 1fr;
    1. Spalte: von 250px bis 500px breit
    2. Spalte: vom restlichen Platz 2 Drittel
    3. Spalte: das letzte Drittel
}

Weitere Spaltenformationen: minmax(250px, 500px) 1fr minmax(250px, 500px);

CSS:
.grid-elternelement {
    ...
    grid-template-columns: minmax(250px, 500px) 1fr minmax(250px, 500px);
1. Spalte: bleibt beim Verkleinern mindestens 250px breit, beim Vergrössern wird es bis zu 500px
2. Spalte: Der restlichen Platz
3. Spalte: bleibt beim Verkleinern mindestens 250px breit, beim Vergrössern wird es bis zu 500px
}

Ich höre hier jetzt mal auf! Je tiefer ich da eindringe umso weniger bleibt bei mir hängen :-(
Wahrscheinlich werde ich später mal nur "fr" verwenden.

Oben bei den Spalten haben wir uns keine Gedanken um die Reihen gemacht. Ist ja auch verwirrend das Ganze..., gell? :-)

Nochmal,- ich werde wohl in Zukunft nur "fr" und irgendein "minmax" bei den Spalten weiter verwenden. Mal sehen...

Wo fangen wir am Besten an?: grid-template-rows: auto; geht immer:

CSS:
.grid-elternelement {
    ...
    grid-template-columns: minmax(250px, 1fr) 1fr 1fr;
    grid-template-rows: auto;   "auto" passt sich dem Inhalt automatisch an und ist die "Werkseinstellung". Es müsste also NICHT notiert werden!
}

grid-template-rows: auto; passt sich dem Inhalt automatisch an. Es ist auch der CSS-Defaultwert.

Vorheriges Row mit weiteren Div's: grid-template-rows: auto :

Html:
<div class="grid-elternelement">
    <div class="grid-header"></div>
    <div class="grid-main"></div>
    <div class="grid-footer"></div>
    <div>noch ein explizites DIV</div>
    <div>noch ein explizites DIV</div>
    <div>noch ein explizites DIV</div>
    <div>noch ein explizites DIV ....</div>
</div>  


CSS:
.grid-elternelement {
    ...
    grid-template-columns: minmax(250px, 1fr) 1fr 1fr;
    grid-template-rows: auto;  "auto" passt sich dem Inhalt automatisch an und ist die "Werkseinstellung".
}

Die zusätzlich eingefügten Div werden, als Kindelemente, automatisch als Div-Items übernommen

: grid-template-rows: auto 1fr auto;: 3 Spalten übereinander

CSS:
.grid-elternelement {
    display: grid;
    grid-template-rows: auto 1fr auto;  erzeugt nur Reihen
    height: 600px; Höhe für Elternelement angeben
}

Das klassische "Holy Grail Layout": Der Anfang

(Header oben, Footer unten, links und rechts 2 Sidebars und in der Mitte der Inhalt "main")

Html:
<div class="grid-elternelement">
    <div class="grid-header"></div>
    <div class="grid-sidebar-links"></div>
    <div class="grid-main"></div>
    <div class="grid-sidebar-rechts"></div>
    <div class="grid-footer"></div>
</div>  

CSS:
.grid-elternelement {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: auto 1fr auto;
    grid-template: auto 1fr auto / auto 1fr auto;
    Kurzschreibweise: grid-template: rows / columns)
}

So,- was haben wir hier jetzt:
Die Kästchen haben sich in der Reihenfolge des "Html-Flows" (wie im Code angegeben) untereinander angeordnet.

Es wurden mit grid-template: auto 1fr auto / auto 1fr auto; ein Raster mit 3 Zeilen und 3 Spalten vorgegeben.

Was noch NICHT stimmt ist die Anordnung der Elemente! Also Header oben, Sidebar inks und rechts, main in der Mitte und der Footer ganz unten.

Zum besseren Verständnis bastle ich erst mal ein Raster oder Gitter.

Wir basteln ein GRID Raster/Gitter:

Html:
<div class="grid-elternelement">
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
    <div>Div 4</div>
    <div>Div 5</div>
    <div>Div 6</div>
    <div>Div 7</div>
    <div>Div 8</div>
    <div>Div 9</div>
</div>  

CSS:
.grid-elternelement {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}
.grid-elternelement div {
    height: 200px;
}

Ich hoffe, das Prinzip ist zu erkennen.
3 rote Reihen (rows) und 3 grüne Spalten (columns). Das bedeutet auch, dass ein Kästchen, zur eindeutigen Adressierung, nun 2 Layoutpositionen hat. Nämlich "in welcher Spalte" und "in welcher Reihe" es sich befindet!

Grid: Das frühere Html wieder benutzen

Html:
<div class="grid-elternelement">
    <div class="grid-header"></div>
    <div class="grid-sidebar-links"></div>
    <div class="grid-main"></div>
    <div class="grid-sidebar-rechts"></div>
    <div class="grid-footer"></div>
    
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>  

CSS:
.grid-elternelement {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
}

Die Kästchen fügen sich in der Reihenfolge des Html-Codes in das Gridraster ein:

Die überflüssigen Div's werden im nächsten Beispiel gelöscht

Grid: Die überflüssigen Kästchen löschen

Html:
<div class="grid-elternelement">
    <div class="grid-header"></div>
    <div class="grid-sidebar-links"></div>
    <div class="grid-main"></div>
    <div class="grid-sidebar-rechts"></div>
    <div class="grid-footer"></div>
    
    <p>Die überflüssigen Kästchen...</p>
    ...
    ...
</div>  

Die überflüssigen Kästchen wurden gelöscht:

Die überflüssigen Kästchen wurden gelöscht aber der vorgesehene Platz ist immer noch vorhanden.

Weil wir oben bei den Rows explizit grid-template-rows: 1fr 1fr 1fr; angegeben haben. Das heisst, die 3. Reihe ist nun immer noch vorhanden. Sie hat nur keinen Inhalt.

Wir müssen also das Grid-Sytem des Elternelements anpassen.

Das neue Grid-Raster wird nachfolgend in: grid-template-rows: auto 1fr auto; umgewandelt.

Als Nächstes wird das Grid-Raster angepasst und die Kästchen neu positioniert

Grid: Die Kästchen neu positionieren

Html:
<div class="grid-elternelement">
    <div class="grid-header"></div>
    <div class="grid-sidebar-links"></div>
    <div class="grid-main"></div>
    <div class="grid-sidebar-rechts"></div>
    <div class="grid-footer"></div>
</div>

CSS:
.grid-elternelement {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr auto;
    
    oder die Kurzschreibweise:
    grid-template: auto 1fr auto / auto 1fr auto;  /* Achtung!: Zuerst die rows/ dann die columns */
}

Kästchen einsortieren:
Hier werden nun nur die Spalten benutzt, die Kästchen fügen sich laut dem Html-Flow richtig ein.

Unsere 3 columns sind von 4 Aussenlinien umschlossen. Diese Linien benutzen wir zur Adressierung bzw. Platzierung der Kästchen.


/* Der Header geht bei den columns/Spalten von Spalten-Aussenlinie 1 bis 4. Da er im Html-Flow an erster Stelle steht, kommt er auch in die erste Reihe */

.grid-header          { grid-column: 1 / 4; }
.grid-sidebar-links   { grid-column: 1 / 2; }
.grid-main            { grid-column: 2 / 3; }
.grid-sidebar-rechts  { grid-column: 3 / 4; }
.grid-footer          { grid-column: 1 / 4; }

Wir haben nachstehend im "Hintergrund" 3 Spalten und 3 Reihen. Das sind jeweils 4 Begrenzungslinien.

An dieser Stelle haben wir jetzt schon mal ein funktionsfähiges Grid-Layout erstellt was sich bei sehr vielen Bildschirmgrössen automatisch anpasst. Es kommt halt immer auf die Menge des Inhalts in den Grid-Items an.

Das Besondere ist, dass wir keine festen Pixelwerte verwendet haben und bisher ohne Media-Queries ausgekommen sind. Die Umstellung auf kleinere Bildschirmgrössen probieren wir jetzt auch noch aus.

Grid: Mobile Ansicht mit Media-Queries

Hier nun zu unserem Beispiel:

- Header und Footer bleiben wie gehabt über die gesamte Breite.
- die Sidebars könnte man untereinander stellen
- main unter die beiden Sidebars
Als Breakpoint wähle ich 720px. Ist ja nur ein Beispiel...

CSS:
@media screen and (max-width: 720px) {

    .grid-elternelement {
        keine Änderung..
        }

        Mobile Ansicht einstellen:
        .grid-header            { grid-column: 1 / 4; }
        .grid-sidebar-links     { grid-column: 1 / 4; }
        .grid-main              { grid-column: 1 / 4;
                                  grid-row: 4;  /*Soll nun in Zeile 4 wo normalerweise sidebar-rechts stehen würde*/
                                }
        .grid-sidebar-rechts    { grid-column: 1 / 4; }
        .grid-footer            { grid-column: 1 / 4; }
}

Bei 720px werden alle Kästchen, wie im Html-Flow, untereinander dargestellt. Mit dem Grid-Sytem greife ich allerdings in den Html-Flow ein und stelle die beiden Sidebars untereinander:

Das nachfolgende Beispiel gilt nur bei <720px. Daher irritieren die Angaben in den Kästchen bei einer breiteren Bildschirmgrösse.

Bitte Bildschirmgrösse auf kleiner 720px einstellen:

Es gibt allerdings eine Grid-Layout Methode mit der ich die Kästchen frei einsortieren kann. Das probieren wir jetzt...
Ich muss auch erst einmal die optimale Grid-Struktur für mich herausfinden.

Grid-Layout Methode, grid-area:

Mit "grid-area" werden unsere Kästchen mit Namen versehen und wie LEGO-Steine in das Grid-Layout eingefügt. Auf den natürlichen Html-Flow wird dann keine Rücksicht mehr genommen und sollte nur in Ausnahmefällen praktiziert werden.

Html:
<div class="grid-elternelement">
    <div class="grid-area-header">Header</div>
    <div class="grid-area-sidebar-links">Sidebar-links</div>
    <div class="grid-area-main">Main</div>
    <div class="grid-area-sidebar-rechts">Sidebar-rechts</div>
    <div class="grid-area-footer">Footer</div>
</div>
         
CSS:
Zuerst werden den "grid-areas" im Stylesheet neue Namen gegeben.
Achtung: Das muss im Stylesheet vor dem Elternelement passieren!

.grid-area-header        { grid-area: hd; }  "hd" Name der grid-area
.grid-area-sidebar-links { grid-area: sb-l; }
.grid-area-main          { grid-area: m; }
.grid-area-sidebar-rechts{ grid-area: sb-r; }
.grid-area-footer        { grid-area: f; }

erst danach dürfen sie im Elternelement benutzt werden.
.grid-elternelement { 
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-auto-rows: minmax(100px, auto);
    
    grid-template-areas: 
        'hd hd hd hd hd hd hd hd hd'
        'sb-l sb-l m m m m m sb-r sb-r' 
        'sb-l sb-l m m m m m sb-r sb-r'
        'sb-l sb-l m m m m m sb-r sb-r'
        'f f f f f f f f f';
    grid-gap: 10px;          Abstand zwischen den Kästchen
    border: 3px solid red;
    }

Wichtig:
Es müssen alle Areas angegeben werden sonst ist das Grid nicht gültig. Das heisst, bei 9 columns müssen auch sämtliche 9 Spalten mit den area-Namen befüllt werden. Nur wenn die Spalten vollständig mit gültigen Werten beschrieben werden wird das Grid richtig angezeigt.

Weiterhin ist zu beachten, dass nur Rechtecke erzeugt werden können. Sie müssen waagrecht oder senkrecht angeordnet werden. L-förmige Konstrukte gibt es leider noch nicht und würden das Grid-Raster zerstören.

Es muss exakt so geschrieben werden:
- Zwischen jedem Namen muss mindestens 1 Leerzeichen sein.
- Mehrere Leerzeichen sind auch gültig.
- Jede Zeile beginnt und ended mit (').
- Das (;) kommt erst am Schluss der Auflistung.

Hier nochmal als Muster:

CSS:
grid-template-areas: 

' hd    hd  hd hd hd hd hd   hd   hd'
'sb-l  sb-l  m  m  m  m  m  sb-r  sb-r' 
'sb-l  sb-l  m  m  m  m  m  sb-r  sb-r'
'sb-l  sb-l  m  m  m  m  m  sb-r  sb-r'
' f     f    f  f  f  f  f   f     f  ';
}

Und hier ist unser Grid:

grid-gap: 10px; Im vorstehenden Grid sieht man Abstände zwischen den einzelnen Elementen. Leider wirken sie nur innerhalb des Grid-Rasters.

Nach aussen (zum roten Rand des Elternelements hin) wirken sie nicht. Hier hilft ein "padding: 10px" im Grid-Elternelement damit das auch harmonisch aussieht.

grid-area: Die Kästchen neu positionieren und was es mit den Leerstellen im Grid-Raster auf sich hat

Mit unserem Grid-Layoutsystem ist es jetzt relativ einfach, die Kästchen neu zu platzieren

Altes Layout:

CSS:
....
grid-template-areas: 

' hd    hd   hd hd hd hd hd hd     hd '
'sb-l  sb-l  m  m  m  m  m  sb-r  sb-r' 
'sb-l  sb-l  m  m  m  m  m  sb-r  sb-r'
'sb-l  sb-l  m  m  m  m  m  sb-r  sb-r'
' f     f    f  f  f  f  f   f     f  ';
}

Neues Layout:

CSS:
....
grid-template-areas: 
    'sb-l  sb-l  hd hd hd hd hd hd     .  '   Achtung: 1 Punkt!
    'sb-l  sb-l  .  .  .  .  .  sb-r  sb-r'   Achtung: 5 Punkte!
    'sb-l  sb-l  m  m  m  m  .  sb-r  sb-r'   Achtung: 1 Punkt!
    'sb-l  sb-l  m  m  m  m  .   .     .  '   Achtung: 3 Punkte!
    'sb-l  sb-l  f  f  f  f  f   f     .  ';
    
    padding: 10px;         Abstand ausserhalb Gridgitter
    gap: 10px 20px;        Abstand row/column innerhalb Gridgitter
}
Leerplätze im Gridgitter werden durch einen Punkt (.) markiert. Sie funktionieren nicht in der Mitte eines Elements, nur am Rand.
Um ein Element in der Höhe oder Breite zu kürzen, muss die zu kürzende Stelle mit Punkten aufgefüllt werden.

Und so sieht das dann aus: Punkte angedeutet, mehr krieg ich nicht hin :-(

Nicht aufgeben!
Bei diesem Layoutsystem verursacht ein fehlender oder falsch platzierter Punkt einen Crash des gesamten Layouts. Das hat mich immer irritiert weil ich optisch keinen Anhaltspunkt für meinen Fehler finden konnte.

Ich habe mir dann ein winziges Beispiel heruntergeladen, das ich dann in aller Ruhe studieren konnte. Leider nur in englisch: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas

Grid-Kinder: Sie heissen "Grid-Cell"....oder auch nicht

Die kleinste Einheit in einem Grid-Raster ist die "Grid-Cell". Das könnte durchaus ein Grid-Kind sein. Wenn das Grid-Kind sich aber über mehrere Zellen hinweg erstreckt, dann ist es immer noch das Grid-Kind aber nicht eine Grid-Cell.
Ok,- Luxusprobleme..... Nee Halt! Es geht noch weiter: Sie heissen auch noch "Grid-Items".

"Grid-Kinder" sind die unmittelbaren Nachfolger des Grid-Elternelements. Sie haben die Grid-Eigenschaften von ihrem Elternelement geerbt.

Kinder von Grid-Kindern haben diese Eigenschaften nicht mehr. können aber mit display: grid; wieder in ein Grid-Element umgewandelt werden.
Man könnte sich auch zu einem display: flex; entscheiden oder zu nix ;-)

Html:
<div class="grid-elternelement">
    <div>Grid-Kind 1</div>
    <div>Grid-Kind 2</div>
    <div>Grid-Kind 3</div>
    <div>Grid-Kind 4</div>
</div>

CSS:
.grid-elternelement {
    display: grid;
    max-width: 100%;
    height: 350px;        /*nur zu Demonstrationszwecken*/
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    
    grid-gap: 1rem;      /* alte Schreibweise */
    gap: 1rem;           /* neue Schreibweise */
    padding: 1rem;
    border: 2px solid red;
}

Erläuterung zu grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

repeat:
Wiederhole so oft, wie direkte Kindelemente vorhanden sind. Sebst wenn es Tausende wären ;-)
auto-fit:
Quetsche sie in das Elternelement und wenn der Platz in der Breite nicht mehr reicht, erzeuge eine neue Zeile und schiebe die überzähligen Kästchen dort hin.
minmax(280px, 1fr):
Dieser Platz muss in der Breite mindestens 280px sein, darunter läuft nix. Ansonsten springe ich in die nächste Zeile!
Und am Schluss?
Wenn kein Platz mehr für 2 Boxen mit jeweils 280px übrig ist, dann stehen wir halt alle untereinander mit 1fr. :-)

So sieht das im Browser aus:

Grid-Kinder: justify-...

Gilt für Grid und Flex!

Alles was mit "justify- ..." beginnt bezieht sich auf die Hauptachse. Bei der Defaulteinstellung der Browser mit flex-direction: row; bezieht sich das auf die waagrechte Achse. Also von links nach rechts wenn die Schreibrichtung ltr (left-to-right) ist.

Ist die flex-direction: columns dann gilt von oben nach unten. Weil die Hauptachse jetzt von oben nach unten verläuft.

Es gibt:
justify-content
justify-items
justify-self

Mit justify-content entscheidet der Browser, wie er sämtliche Kiner auf dem verfügbaren Platz horizontal anordnet.

Html:
(wie vorher, siehe oben)

CSS:
.grid-elternelement {
    display: grid;
    grid-template-columns: 1fr 1fr; /*zur besseren Darstellung*/
    justify-content: start;
}

So sieht justify-content: start; im Browser aus:
(In der Mitte senkrecht ist die unsichtbare Trennlinie zwischen "1fr" und "1fr")

Das rote Grid-Elternelement ist in 2 Teile aufgeteilt. In jedem sind 2 Kind-Elemente.
Wenn man sich in der Mitte die Trennlinie der beiden "1fr" vorstellt, dann kann man sich die Bedeutung von justify-content: start; vorstellen.

So sieht justify-content: center; im Browser aus:
(In der Mitte senkrecht ist die unsichtbare Trennlinie zwischen "1fr" und "1fr")

So sieht justify-content: end; im Browser aus:
(In der Mitte senkrecht ist die unsichtbare Trennlinie zwischen "1fr" und "1fr")

Grid-Kinder: justify-items

Mit justify-items entscheidet der Browser, wie er seine Kinder auf dem verfügbaren Platz horizontal anordnet.

Html:
(wie vorher, siehe oben)

CSS:
.grid-elternelement {
    display: grid;
    grid-template-columns: 1fr 1fr; /*zur besseren Darstellung*/
    justify-items: start;
}

Achtung zuerst ein Test: Der Unterschied zwischen justify-content u. justify-items

So sieht justify-content: start; im Browser aus: Hier hat Alles dieselbe Breite wegen "1fr 1fr".

Zum Vergleich:
So sieht justify-items: start; im Vergleich aus: Hier passt sich die Breite dem Inhalt an.

Testende justify-content vs. justify-items.

So sieht justify-items: center; im Browser aus:

So sieht justify-items: end; im Browser aus:

Grid-Kinder: justify-self

Die Anweisung justify-self wird direkt in das betreffende Kind-Element geschrieben. Mit justify-self kann sich ein Kästchen, entgegen der übrigen Positionen, selbst ausrichten. Der Befehl hat Vorrang!

Html:
<div class="grid-elternelement">
    <div>Grid-Kind 1</div>
    <div>Grid-Kind 2</div>
    <div>Grid-Kind 3</div>
    <div>Grid-Kind 4</div>
</div>

CSS:
.grid-elternelement {
    display: grid;
    grid-template-columns: 1fr 1fr; /*zur besseren Darstellung*/
    justify-items: center; /* gilt für alle Kindelemente*/
}

.grid-elternelement .grid-kind-3 {
    justify-self: start; /* gilt nur für Div 3 */
}

So wirkt sich justify-self: start; im Browser aus:

Wir könnten noch tagelang hier rummachen, denn, was mit justify-.... für die waagrechte Achse gegolten hat, gilt für die senkrechte Achse mit align-.....

Vielleicht könnten wir uns nur auf ein kleines Beispiel einigen? ;-)

Grid-Kinder: align-... ( Abstand nach oben oder unten)

Die Anweisung align-... bezieht sich in der waagrechten Achse auf den Abstand in senkrechter Richtung. Also "oben" "mitte" und "unten".

Die beiden Achsen heissen übrigens "Main-Axis" (von links nach rechts) und "Cross-Axis" (von oben nach unten)

Html:
<div class="grid-elternelement">
    <div>Grid-Kind 1</div>
    <div>Grid-Kind 2</div>
    <div>Grid-Kind 3</div>
    <div>Grid-Kind 4</div>
</div>

CSS:
.grid-elternelement {
    display: grid;
    grid-template-columns: 1fr 1fr;   /*zur besseren Darstellung*/
    justify-items: center;            /* waagrechte Ausrichtung */
    align-items: end;                 /* senkrechte Ausrichtung */
}

.grid-elternelement .grid-kind-3 {
    align-self: start; /* gilt nur für Div 3 */
}

So sieht align-self: start; im Browser aus:

blafasel

Media Cards mit Bild und Text

Html:
<div class="grid-elternelement">
    <div class="media-card-image">
        <img src="../../images/1.jpg" width="1024" height="691" alt="Hübsche Frau">
    </div>
    <div class="media-card-text">
        <p>Das ist ein Beispiel für ein Media-Objekt. Wir benutzen dazu "grid-template-areas:" um Bild und Text bei Bedarf zu vertauschen.</p>
    </div>
</div>

CSS:
.grid-elternelement .media-card-image {
    display: grid;
    grid-area: img;
    place-items: center;
    margin-right: 10px;
}

.grid-elternelement .media-card-text {
    display: grid;
    grid-area: content;
    padding: 10px;
    place-items: center;
}

.grid-elternelement {
/* max-width: 600px; */                   hier die Gesamtgrösse einstellen

    display: grid;
    grid-template-columns: 1fr 3fr;       Bild links/Text rechts
    grid-template-areas: "img content";   Bild links/Text rechts
    grid-template-columns: 3fr 1fr;       Bild rechts/Text links
    grid-template-areas: "content img";   Bild rechts/Text links
    
    padding: 5px;
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
}

Das ist ein Beispiel für ein Media-Objekt. Wir benutzen dazu grid-template-areas: um Bild und Text bei Bedarf zu vertauschen.

grid-template-columns: 3fr 5fr; Bild links/Text rechts
grid-template-areas: "img content"; Bild links/Text rechts

Das ist ein Beispiel für ein Media-Objekt. Wir benutzen dazu grid-template-areas: um Bild und Text bei Bedarf zu vertauschen.

grid-template-columns: 5fr 3fr; Text links/ Bild rechts
grid-template-areas: "content img"; Text links/ Bild rechts

Bild oben Text unten:

Das ist ein Beispiel für ein Media-Objekt. Wir benutzen dazu grid-template-areas: um Bild und Text bei Bedarf zu vertauschen.

grid-template-columns: 1fr; /* 1 Spalte */
grid-template-areas:
"img"
"content"; /* Bild oben/Text unten */

Text oben/Bild unten: Funktioniert merkwürdigerweise nicht!?

Die Reihenfolge im Html-Code muss also umgedreht werden

Das ist ein Beispiel für ein Media-Objekt. Wir benutzen dazu grid-template-areas: um Bild und Text bei Bedarf zu vertauschen.

Funktioniert irgenwie nicht?!

Grid, Bild mit Text-Overlay:

CSS:
.grid-elternelement {
    display: grid;
    max-width: 600px;                     /* hier die Gesamtgrösse einstellen! */
    grid-template-columns: 1fr;          /* gelöscht */
    grid-template-areas: "img content";  /* gelöscht */
        
    padding: 5px;
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
}

Das Bild passt sich der Bildschirmgrösse gut an:

Titel

Das ist ein Beispiel für ein Media-Objekt. Wir benutzen dazu grid-template-areas: um Bild und Text bei Bedarf zu vertauschen.