CSS Grid ist eine zunehmend verbreitete Methode zum Erstellen komplexer responsiver Webdesign-Layouts, die in Browsern konsistenter dargestellt werden. Jetzt ist es an der Zeit, sich mit CSS Grid vertraut zu machen. Daher haben wir 13 der besten Möglichkeiten gesammelt, um mit dem Lernen heute zu beginnen.
Anstelle von Old-School-Methoden wie Tabellen oder dem Box-Modell können Sie mit CSS Grid mehr asymmetrische Layouts und mehr standardisierten Code erstellen, der Browser-kompatibel ist. Die meisten großen Website-Browser unterstützen bereits CSS Grid. Dies ist eine W3C-Kandidatenempfehlung, die es als Standardverfahren formalisieren würde. Es wird allgemein angenommen, dass CSS Grid die Zukunft von Website-Layouts sein wird.
1. MDN: CSS-Rasterlayout
Mozilla verfügt über umfangreiche Ressourcen in den MDN Web Docs-Handbüchern, die eine einfache Erklärung der Funktionsweise und Codebeispiele beweisen, um Ihnen den Einstieg zu erleichtern.
Das sagt MDN über das CSS-Grid:
Das CSS-Rasterlayout eignet sich hervorragend zum Unterteilen einer Seite in Hauptregionen oder zum Definieren der Beziehung in Bezug auf Größe, Position und Ebene zwischen Teilen eines Steuerelements, das aus HTML-Grundelementen erstellt wird.
Wie bei Tabellen ermöglicht das Rasterlayout einem Autor das Ausrichten von Elementen in Spalten und Zeilen. Mit CSS-Grid sind jedoch wesentlich mehr Layouts möglich oder einfacher als mit Tabellen. Die untergeordneten Elemente eines Gittercontainers könnten sich beispielsweise so positionieren, dass sie sich tatsächlich überlappen und schichten, ähnlich wie bei CSS-positionierten Elementen.
Die Dokumentation enthält Code und Beispiele sowie Elemente, die Sie in CodePen oder JSFiddle selbst öffnen und damit spielen können. Dies könnte der beste Ausgangspunkt sein, um über CSS-Grid nachzudenken.
2. Lernen Sie das CSS-Grid
Learn CSS Grid ist eine Anleitung zum Erlernen der Technik von Jonathan Suh, basierend auf der Methode, in der er sie gelernt hat. Der Leitfaden ist übersichtlich und beginnt mit einem Inhaltsverzeichnis, in dem Sie von Abschnitt zu Abschnitt springen können.
Dieser Leitfaden ist leicht zu befolgen - einige Programmierkenntnisse erforderlich - und ist eine großartige Quelle für CSS-Einsteiger. Zu jedem Element gehört ein visuelles Beispiel, das möglicherweise der Schlüssel zum Zusammenführen aller Informationen ist.
3. Tuts + Anleitung zu CSS-Grids
Tuts + bietet eine umfassende Anleitung, mit der Sie das CSS-Grid erlernen können, unabhängig davon, ob Sie gerade mit den Grundlagen beginnen oder etwas fortgeschrittenes CSS erkunden möchten. Dies geschieht durch eine Reihe klarer und gründlicher Tutorials mit praktischen Beispielen.
4. Codeacademy: Einführung in Grids
Die Codeacademy ist seit langem einer der besten Orte, um Codierfähigkeiten in einem praktischen Format zu erlernen. Sie müssen zwar ein Konto erstellen, um auf die Lernprogramme zugreifen zu können, es ist jedoch eine gute Möglichkeit, ein auf Stundenplan basierendes Format zu erlernen.
Hier ist die Beschreibung des Kurses Einführung in Grids:
In dieser Lektion stellen wir ein neues, leistungsfähiges Werkzeug namens CSS-Grid vor. Das Raster kann zum Erstellen von gesamten Webseiten verwendet werden. Während Flexbox hauptsächlich zum Positionieren von Elementen in einem eindimensionalen Layout verwendet werden kann, ist das CSS-Raster am besten für zweidimensionale Layouts geeignet Säulen.
Der Codeacademy-Kurs kann nacheinander absolviert werden. Beginnen Sie ganz am Anfang, wenn Sie mit dem Backend-Webdesign noch nicht vertraut sind - oder alleine. Es ist kostenlos, ein Konto zu erstellen und an vielen Kursen teilzunehmen.
5. FreeCodeCamp: Lernen Sie das CSS-Grid in 5 Minuten
Erfahren Sie, worum es beim CSS-Grid geht, und haben Sie nur ein paar Minuten, um wirklich hineinzutauchen? Dieses Schnellstart-Tutorial von FreeCodeCamp hilft Ihnen, sich innerhalb von nur fünf Minuten damit vertraut zu machen. (Zugegeben, Sie müssen bereits einige Grundlagen kennen.)
Hier ist der Imbiss:? Die zwei Hauptbestandteile eines CSS-Grids sind der Wrapper (übergeordnetes Element) und die Elemente (untergeordnete Elemente). Der Wrapper ist das eigentliche Raster und die Elemente sind der Inhalt des Rasters.?
Der 5-Minuten-Leitfaden enthält auch relevante Markups.
6. Der CSS-Layout-Workshop
Der CSS-Layout-Workshop besteht aus bezahlten Kursen von Rachel Andrew, einer der führenden Anbieter von CSS-Grid-Arbeiten. Die Kurse sind ein Online-Selbstlernprogramm, das ideal ist, wenn Sie mehr Struktur möchten, um etwas Neues zu lernen.
Um zu sehen, ob dieser Kurs für Sie der richtige ist, ist der erste Teil kostenlos. Es konzentriert sich auf CSS-Grundlagen und erklärt alle Grundlagen, die Sie benötigen, um tiefer in das Material einzutauchen. Das Gute am gesamten Kursangebot ist, dass keine zusätzlichen Kosten anfallen. Sie benötigen lediglich einen Webbrowser und einen Texteditor, um zu beginnen.
7. Spiel: Grid Garden
Grid Garden ist ein Spiel, das CSS verwendet, um einen erfolgreichen Karottengarten anzubauen. Es ist eine gute Einführung in die Funktionsweise von CSS-Eigenschaften, um Sie in die Lage zu versetzen, über CSS-Grid nachzudenken.
Und es macht viel Spaß. Sehen Sie, ob Sie alle 28 Levels durchstehen.
8. Raster nach Beispiel
Raster für Beispiel zeigt, wie verschiedene CSS-Raster-Konfigurationen in unterstützenden Browsern aussehen. Jede Gitterkonfiguration enthält ein visuelles Beispiel mit Links zu Seiten mit weiteren Informationen zu Technik und Code.
Es gibt auch einen Spaßbonus mit Dummy-Seitenlayouts, so dass Sie sehen können, wie verschiedene CSS-Raster-Beispiele aussehen und der tatsächliche Inhalt darauf angewendet wird.
9. Video: Lernen Sie das CSS-Grid
Wenn Sie lernen möchten, dass jemand etwas tut, liegt das mehr in Ihrer Gasse. (Es hat auch Begleittext.)
Das 18-minütige Video ist ein schnelleres Einführungs-Tutorial, von dem der Hersteller hofft, dass er Sie dabei unterstützen wird, das volle Potenzial des CSS-Rasters zu erkunden.
Das Video führt Sie durch das Einrichten eines Projekts, das Definieren des HTML-Codes, das Definieren einiger grundlegender Regeln, das Definieren von Rastern, das Schachteln des CSS-Rasters und der Vorlagenbereiche sowie einige responsive Tricks. Das Video und der Text enthalten Screenshots aller Markierungen.
10. CSS-Tricks: Eine vollständige Anleitung zum Raster
CSS-Tricks waren lange Zeit ein beliebter Ort, um etwas über das Codieren zu lernen. Das Complete Guide to Grid ist keine Ausnahme.Der im November 2017 veröffentlichte Leitfaden ist eine aktuelle Einführung in das 2D-System.
Dieser Leitfaden ist fantastisch und in verdaubare Abschnitte unterteilt.
Der beste Teil ist jedoch die Galerie des CSS-Rasters in Aktion. Verbringen Sie einige Zeit in der Galerie, um sich inspirieren zu lassen.
11. CSS-Grid Fragen Sie mich etwas
Haben Sie Fragen zum CSS-Raster? Fragen Sie einen Experten.
Dieses Git enthält einfache Fragen und Antworten von Rachel Andrew. Sie beantwortet zwar nur reduzierte Fragen, ist aber dennoch sehr hilfreich. Beachten Sie einfach die Grundregeln.
12. Video: Unsere Layouts weiterentwickeln
Jen Simmons spricht über ihre Vorträge von der Enhance Conference 2016 für Benutzer. In dem 30-minütigen Video werden Beispiele für ein CSS-Raster in Aktion gezeigt, und es wird beschrieben, wie Code in einer Zeit der Übergangstechniken geschrieben wird.
Schauen Sie sich das Video an und dann können Sie auch das Dia-Deck durchgehen. Das Paar ist sehr nützlich, um CSS-Raster in einem breiteren Sinne zu betrachten.
13. CSS-Spielplatz
Sind Sie bereit, all diese CSS-Raster-Ideen und -Fähigkeiten zu testen? Der CSS-Rasterspielplatz enthält Platz für Gittercontainer und Gitterelemente, sodass Sie mit der Codierung beginnen und sehen können, was in Echtzeit passiert.
Es ist eine gute Möglichkeit, sich mit den Grundlagen vertraut zu machen und Änderungen zu sehen, wenn Sie sie vornehmen. (Es fühlt sich fast wie ein Spiel an.)
Fazit
Hören Sie auf, zu zögern, wenn Sie nicht den Schritt gewagt haben, sich zumindest mit dem CSS-Raster vertraut zu machen. Machen Sie es sich zum Ziel, sich mit Best Practices vertraut zu machen, damit Sie besser verstehen, wie es funktioniert und wie man es verwendet.
Hier ein Rat an alle Leute, die großartige Ressourcen zum CSS-Grid zur Verfügung stellen. Man muss zugeben, dass die Community für Webdesign und -entwicklung ziemlich erstaunlich ist, wenn es um das Teilen von Wissen geht. Wenn Sie eine dieser Lektionen oder Tutorials verwenden und davon profitieren, sollten Sie die Liebe mit dem Autor teilen und ihn oder sie wissen lassen, dass sie Ihnen geholfen haben.