zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Flexbox ohne "Wrapper"-Divs?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #31 (permalink)  
Alt 04.03.2021, 16:25
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

Wenn man ein reines Grid-Layout beim gegebenen Markup verwendet:


Arbeitet man dann beim Header am besten mit subgrid?


Also
Code:
body, header { display: grid } 

header { grid-template-rows: subgrid }
__________________

Mit Zitat antworten
Sponsored Links
  #32 (permalink)  
Alt 04.03.2021, 16:27
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Kommt darauf an ob dir der Support von subgrid ausreicht:
https://caniuse.com/?search=subgrid
Mit Zitat antworten
Sponsored Links
  #33 (permalink)  
Alt 05.03.2021, 00:43
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

Danke.


OK, "subgrid" kann man zur Zeit also vergessen.
__________________

Mit Zitat antworten
  #34 (permalink)  
Alt 06.03.2021, 09:45
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

Ich habe noch ein übersichtliches Codebeispiel für ein "nested Grid" gefunden:

https://codepen.io/rachelandrew/pen/NqQPBR

Die Autorin setzt Namen für die Grid Lines ein.


Das erscheint mir eine Praxis zu sein, die zur guten Orientierung beiträgt.


Ich muss mich noch belesen, ob bei nested Grids die Verwendung von grid-area bzw. grid-column-start/end und grid-row-start/end nützlich ist.
__________________


Geändert von AndreasB (06.03.2021 um 09:58 Uhr)
Mit Zitat antworten
  #35 (permalink)  
Alt 06.03.2021, 10:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Zitat:
Die Autorin setzt Namen für die Grid Lines ein.
Nein, die verwendet nur Klassennamen aus jeweils einem Buchstaben. Das wird schnell unübersichtlich. "Sprechende" Klassennamen sind auf Dauer sinnvoller und erleichtern spätere Änderungen.

In CSS-Grid gibt es Namen, die funktionieren aber anders.

Zitat:
Ich muss mich noch belesen, ob bei nested Grids die Verwendung von grid-area bzw. grid-column-start/end und grid-row-start/end nützlich ist.
Der Satz ist eher sinnfrei. Du verläufst dich in englischsprachigen Bezeichnungen, die du nicht verstehst.

In dem Beispiel geht es schlicht darum, dass sich CSS-Grid im Gegensatz zu float nicht vererbt. Das haben wir dir bereits (in verschiedenen Themen meiner Erinnerung nach sogar mehrfach) auf deutsch geschrieben.
Mit Zitat antworten
  #36 (permalink)  
Alt 06.03.2021, 23:29
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen
Nein, die verwendet nur Klassennamen aus jeweils einem Buchstaben.
Über die Klassennamen sprach ich gar nicht. (Es ist auch ein wenig beleidigend, mir zu unterstellen, ich wisse nicht, was Klassen sind. Sei's drum.)

Du übersiehst etwas:

https://www.w3.org/TR/css-grid-1/#named-lines
In CSS-Grid gibt es Namen, die funktionieren aber anders.


Zitat:
Zitat von MrMurphy Beitrag anzeigen
Der Satz ist eher sinnfrei. Du verläufst dich in englischsprachigen Bezeichnungen, die du nicht verstehst.
Nein. Du irrst Dich.
https://developer.mozilla.org/en-US/...med_Grid_Lines
Zitat:
Zitat von MrMurphy Beitrag anzeigen
In dem Beispiel geht es schlicht darum, dass sich CSS-Grid im Gegensatz zu float nicht vererbt.
Wir verstehen einander öfter nicht. Kein Problem.
Mein Satz "Ich muss mich noch belesen, ob bei nested Grids die Verwendung von grid-area bzw. grid-column-start/end und grid-row-start/end nützlich ist. " bezog sich nicht auf das Beispiel von
https://codepen.io/rachelandrew/pen/NqQPBR
__________________

Mit Zitat antworten
  #37 (permalink)  
Alt 08.03.2021, 09:34
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von AndreasB Beitrag anzeigen
Ich muss mich noch belesen, ob bei nested Grids die Verwendung von grid-area bzw. grid-column-start/end und grid-row-start/end nützlich ist.
Wenn es dir hilft, den Code dadurch übersichtlich zu halten ist es schon nützlich. Also da würde ich nicht lesen sondern einfach probieren und wenn es für dich für die Entwicklung Sinn macht, verwende es. Gerade bei grid gibt es so viele verschiedene Methoden.

Ist aber ein schönes Beispiel welches du da gefunden hast, das zeigt schon einiges auf was mit grid möglich ist.

Ansonsten: Zusätzlich zu den von dir bereits verlinkten Methoden (named grid lines) gibt es auch noch grid-template-areas, das ist eine für mich persönlich schöne Methode das Grid zu definieren da man es sozusagen "aufzeichnet".

Code:
.grid {
 display: grid;
 grid-template-areas: 
    "header header" 
     "navigation main" 
     "navigation footer";

/*oder in einer zeile geschrieben:*/ 
 grid-template-areas:  "header header"  "navigation main"  "navigation footer";

}

.navigation {
  grid-area: navigation; /*wird in oben definierte navigation platz gesetzt*/
}
Mit Zitat antworten
  #38 (permalink)  
Alt 08.03.2021, 10:06
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

@cloned

Ja, benannte grid lines und benannte grid areas werde ich auf jeden Fall einsetzen, weil es zur Klarheit und Übersicht beiträgt.

Vielleicht entwickle ich eine kleine Richtlinie für die Namensmuster im CSS, damit sie mit den Namen im Markup (Elemente, Class-Attribute) korrespondieren?

Grid gefällt mir jedenfalls immer mehr, auch aufgrund dieser Benennungsoptionen, die das Markup jedoch nicht beeinträchtigen.

Das ist völlig neu. Finde ich sehr gut.

Spannend finde ich auch die diversen neuen Eigenschaften/Werte um die Verteilung von Inhalt zu regulieren. Beispiel fit-content.

Das wird noch länger dauern, bis ich die Grundlagen von Grid verstanden habe und damit vernünftig umgehen kann.

Echt ein Pech, dass nicht mal ein einziges Buch in deutscher Sprache zu Grid existiert.
Früher gab's zum Beispiel das exzellente Buch von Eric A. Meyer "CSS - das umfassende Handbuch".
__________________


Geändert von AndreasB (08.03.2021 um 10:12 Uhr)
Mit Zitat antworten
  #39 (permalink)  
Alt 08.03.2021, 10:27
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Die Grundlagen kennst du schon, du weißt wie du einfache Bereiche definierst und Inhalt platziert. Alles andere ist dann schon "wie bringe ich Grid dazu, das zu tun, was ich für meinen Spezialfall brauche". Und das ist nicht Grundlagenwissen, das kommt dann schon mit der Zeit.
bücher werden für Webthemen immer irrlevanter da sich das Web dazu viel zu schnell weiterentwickelt. Da ist es besser einen immer aktuellen Stand auf einer Website zu haben.
Mit Zitat antworten
Sponsored Links
  #40 (permalink)  
Alt 10.03.2021, 18:52
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

@cloned
Es gibt zig (englischsprachige) Bücher zu Web-Themen, die sich schnell entwickeln. Der Grund, dass es keines in deutscher Sprache gibt, wird also wohl die ökonomische Sorge von Verlagen sein, dass es sich beim Thema Grid nicht lohnt.

Seit ich die Zusammenfassung des Grid-Kapitels im Buch "CSS - The Definitive Guide" von Eric A. Meyer gelesen habe, geht mir bei Grid der Arsch noch mehr Grundeis.


Zitat:
I got frustrated and confused as I wrote about grid, going down blind alleys and falling victim to two decades of instincts that had been honed on a layout-less CSS.
Ich hope I was able to steer you past some of those pitfalls, but still, remember the wisdom of Master Yoda: "You must unlearn what you have learned." When coming to grid layout, there was never greater need to put aside what you think you know about layout and learn anew. Over time, your patience and persistence will be rewarded.
Das entspricht meinem ersten Eindruck von Grid:
Etwas vergleichbar Komplexes gab es noch nie in CSS.

Wie auch immer:

Ich habe jetzt ein Grid-Layout gebaut, womit ich beginnen kann.

Ohne Areas: https://www.w3schools.com/code/tryit...e=GOFAKMIJCDKD


Mit Areas: https://www.w3schools.com/code/tryit.asp?filename=GOFMW54FSD2P


Beim CSS war es mir wichtig, den Teil, der unwichtig ist für das Layout, zu separieren von den wesentlichen Teilen für das Grid.
Weiterhin habe ich aus didaktischen Gründen die Bereiche für Container und Items getrennt.

Viel lernen Du noch musst junger Padawan : )
__________________


Geändert von AndreasB (11.03.2021 um 01:57 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Script nur für Inhalt eines bestimmten DIVs Kipperdesign Javascript & Ajax 8 11.02.2013 14:03
DIVs wollen nicht in Container Echnotron CSS 4 22.02.2012 09:46
n Div's in eine Zeile Mustangore CSS 9 20.08.2009 16:19
Höhenanpassung von divs localex CSS 1 21.11.2007 12:25
Divs nebeneinander, aber mittig RomanM CSS 2 24.10.2007 07:32


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:31 Uhr.