Sponsored Links |
|
|||
Kommt darauf an ob dir der Support von subgrid ausreicht:
https://caniuse.com/?search=subgrid |
Sponsored Links |
|
||||
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 08:58 Uhr) |
|
|||
Zitat:
In CSS-Grid gibt es Namen, die funktionieren aber anders. Zitat:
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. |
|
||||
Ü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:
https://developer.mozilla.org/en-US/...med_Grid_Lines Zitat:
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
__________________
|
|
|||
Zitat:
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*/ } |
|
||||
@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 09:12 Uhr) |
|
|||
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. |
Sponsored Links |
|
||||
@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:
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 00:57 Uhr) |
Sponsored Links |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Script nur für Inhalt eines bestimmten DIVs | Kipperdesign | Javascript & Ajax | 8 | 11.02.2013 13:03 |
DIVs wollen nicht in Container | Echnotron | CSS | 4 | 22.02.2012 08:46 |
n Div's in eine Zeile | Mustangore | CSS | 9 | 20.08.2009 15:19 |
Höhenanpassung von divs | localex | CSS | 1 | 21.11.2007 11:25 |
Divs nebeneinander, aber mittig | RomanM | CSS | 2 | 24.10.2007 06:32 |