Ein Leser schrieb und fragte spezifisch, wie man dieses Layout in CSS Flexbox aufbaut.
Meine Antwort: Das ist eigentlich kein Layout für CSS Flexbox. Man könnte es schaffen, wenn man müsste, aber man bräuchte eine Art Kniff, wie zum Beispiel die Gruppierung von Nav und Artikel in einem Elternelement (wenn nicht sogar mehr Gruppierungen). CSS Grid wurde geboren, um diese Art von Layout zu beschreiben, und es wird weitaus einfacher sein, damit zu arbeiten, ganz zu schweigen davon, dass die Browserunterstützung für beide heutzutage weitgehend dieselbe ist.
Was meinen Sie mit „Holy Grail“?
Sehen Sie, Kinder, Layouts im Web waren früher so wackelig, dass das unglaublich einfache Diagramm oben relativ schwierig zu realisieren war, besonders wenn man wollte, dass die „Spalten“ gleiche Höhen haben. Ich weiß, lächerlich, aber das war eben so. Wir haben super seltsame Hacks benutzt, um es hinzubekommen (wie riesige negative Margins gepaart mit positiven Abständen), die sich im Laufe der Zeit zu saubereren Tricks entwickelten (wie Hintergrundbilder, die Spalten simulierten). Techniken, die es schafften, es umzusetzen, nannten es den Heiligen Gral. (Nur zur Klarstellung, normalerweise bedeutete Holy Grail ein Drei-Spalten-Layout mit Inhalten in der Mitte, aber der Hauptpunkt waren Spalten mit gleicher Höhe).
CSS ist jetzt viel robuster, daher können wir es ohne Hacks verwenden, um vernünftige Dinge zu tun, wie z. B. dieses einfache Layout zu realisieren.
Hier ist es in CSS Grid
Dieses Grid wird sowohl mit grid-template-columns als auch mit grid-template-rows eingerichtet. Auf diese Weise können wir sehr genau festlegen, wo diese Hauptbereiche der Website platziert werden sollen.
Ich habe ein paar zusätzliche Dinge eingebaut
- Ich hatte neulich eine weitere Frage zum Erstellen von 1px Linien zwischen Grid-Bereichen. Der Trick ist so einfach wie die Farbe des Elternelements und die Verwendung von
gap: 1px;, also habe ich das im obigen Demo gemacht. - Es ist wahrscheinlich, dass kleine Bildschirme zu einem Ein-Spalten-Layout wechseln. Das habe ich in einer Medienabfrage oben gemacht. Manchmal verwende ich
display: block;auf dem Elternelement, um das Grid auszuschalten, aber hier habe ichgrideingeschaltet gelassen und die Spalten und Zeilen zurückgesetzt. Auf diese Weise erhalten wir immer noch den Abstand und können die Dinge bei Bedarf neu anordnen. - Eine weitere kürzliche Frage, die mir gestellt wurde, betrifft den subtilen „Body-Rand“-Effekt, den Sie im obigen Demo sehen können. Ich habe es so einfach wie möglich gemacht, mit einem Hauch von Abstand zwischen dem Body und dem Grid-Wrapper. Ursprünglich habe ich es zwischen dem Body und dem HTML-Element gemacht, aber für Full-Page-Grids halte ich es für klüger, ein Wrapper-Div zu verwenden, anstatt den Body für das Grid zu verwenden. Auf diese Weise werden Drittanbieter-Dinge, die Elemente in den Body injizieren, keine Layout-Probleme verursachen.
Hey, das verstehe ich nicht:
grid-column: 2 / 3;Sie haben nur zwei Spalten definiert. Ist das ein Tippfehler oder fehlt mir etwas an der Vorlagensyntax? Danke!
Zwei Spalten erzeugen drei Gitterlinien!
Stellen Sie sich diese Rohre als die drei Gitterlinien in einem 2-Spalten-Layout vor.
Beginnend bei Spaltenlinie 2 und endend bei Spaltenlinie 2 bedeutet „in die 2. Spalte einfügen.
Ich weiß, dass die CSS-Konventionen anders sind, aber ich wünschte, sie würden hier von 0 zählen.
Dann hätten 2 Spalten
0 – die ganz linke Linie
1 – Mitte
2 – ganz rechte Linie
Erscheint intuitiver.
Wäre es möglich, das Aside auf kleinen Bildschirmen unter dem Artikel zu platzieren?
Total – und wissen Sie was – ich habe gerade das Demo aktualisiert, um das zu tun. Eigentlich sollte das Aside im Markup nach dem Hauptinhalt stehen, und es hat nur gereicht, das dorthin zu verschieben, weil wir auf dem Desktop so explizit waren, wo die Dinge hingehören.
Wow, das Einfärben des Elternelements und das Belassen eines Abstands… Klingt, als wären wir wieder in der Peek-a-boo-Tabellen-Ära, etwa vor 20 Jahren. Ich habe das beim Drucken hinter mir gelassen, weil Browser eigene Einstellungen hatten, um zu steuern, ob Hintergrundfarben gedruckt werden sollten oder nicht. Aber ich kann nicht wirklich argumentieren, wenn es funktioniert. Die Container teilen sich keine Grenzen wie zwei Tabellenspalten, daher wäre es wahrscheinlich eine mühsame Aufgabe, sie auf andere Weise mit einem Pixel Abstand dazwischen zu bekommen.
Eine Sache, die CSS Grid meiner Meinung nach tun könnte, ist, eine Artikelüberschrift zentriert und vollständige Breite zu verschieben, den Artikelinhalt in das linke Panel zu legen und dann das Aside in das rechte Panel.
Also, in Ihrem Beispiel würde die H1 des Artikels irgendwie dort positioniert werden, wo sich die Kopfzeile befindet, während der Artikelinhalt und das Aside nebeneinander liegen würden.
Wenn Sie semantisch bleiben wollen, sehe ich nicht, wie das funktioniert. Sie müssten die H1 aus dem Artikel-Tag entfernen und sie dann platzieren… wo?
bearbeiten
Hallo Chris,
Danke für diesen Artikel!
Frage zum Scrollen in Grid.
Wie würde jede Spalte überfüllten Inhalt unabhängig voneinander scrollen (ohne Höhenangabe) in einem Full-Page-Grid-Layout? Keine Scrollleiste für die oder Tags, nur für die Spalte mit überfülltem Inhalt. Wie würde man das in Grid machen oder wäre Flex eine bessere Option dafür?
Nochmals vielen Dank!
Damit Überlauf/Scrollen stattfinden kann (und Sinn ergibt), muss *etwas* die Höhe/Breite begrenzen. Ich stelle mir vor, dass das Grid-Elternelement selbst die gesamte Seite einnimmt, die Abschnitte mit
fr-Einheiten die Fläche so gut wie möglich ausfüllen, und dann sagen Sie diesen einzelnen Abschnitten, dass sie nach Bedarf scrollen sollen.In diesem Beispiel wäre es natürlich, nur Unterstützung für das Scrollen im Haupt- und Aside-Bereich zu haben. Dann könnten Sie einfach
overflow-y:autofür diese hinzufügen (und nur auf großen Displays)@media (min-width: 600px) {.page-main,.page-sidebar {
overflow-y:auto;
}
}
Hallo Chris, in welchen Fällen verwenden Sie negative Werte, z. B.:
grid-column: 1 / -1;Eine Umarmung aus Peru
Das bedeutet: Beginne bei der ersten Gitterlinie und ende bei der allerletzten Gitterlinie.
Vielen Dank!!! Ich muss die Linien nicht zählen :D
Im Zusammenhang mit der Verwendung von CSS GRID für das Layout, gibt es Kompatibilität, Flexibilität und/oder strategischen Wert/Vorteil bei der Verwendung von Klassen anstelle von HTML-Elementen als Selektoren, wie Sie es hier getan haben?
Danke für Ihre tolle Arbeit!
Sehr schöner Artikel. Aber wie funktioniert das in IE11 (Entschuldigung, ich musste fragen). Danke
Schön, aber ich bin nicht wirklich mit Ihnen bei „Support für CSS-Grid und Flexbox ist ungefähr gleich“. Caniuse.com sagt mir, dass es mit Präfix 4,55 % bzw. 0,66 % nicht unterstützt wird – das sind 7x mehr problematische Ereignisse!
Wie haben Sie den klickbaren Teil gemacht, der den Artikel ein- und ausklappt?
Ich verstehe nicht, was das tut.
Das ist das Standardverhalten des Details-Tags
Schauen Sie hier nach https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
Hallo Herr Coyier – ich mag Ihr Design, aber ich bekomme es nicht validiert auf dem W3C Validator (https://validator.w3.org). Nachdem ich am Code gearbeitet habe, bin ich auf einen einzigen CSS-Parsing-Fehler bei den drei Klammern unter der „@media“-Regel gestoßen. Gibt es eine Möglichkeit, dieses Design neu zu formatieren, damit es einen Parsing-Check besteht? Wenn ich versuchte, Änderungen durch Verschieben der Klammern vorzunehmen, brach das gesamte Erscheinungsbild des Designs zusammen, was keine Kritik ist. Vielen Dank für die Überprüfung dieses Kommentars.