Erstellen von Layouts mit CSS -Gitter

CSS Grid: Ein leistungsstarkes Layout -Tool für modernes Webdesign

Dieser Auszug aus Tiffanys CSS -Master, 2. Auflage , bietet eine kurze Einführung in das CSS -Raster, ein revolutionäres Layout -System, das im Oktober 2017 eingeführt wurde. Das Grid vereinfacht die Erstellung komplexer Layouts, die zuvor umfangreiche DOM -Manipulation erfordern. Während die Spezifikation detailliert ist, deckt dieser Überblick Schlüsselkonzepte und weist auf weitere Ressourcen für ein detailliertes Lernen hin.

Schlüsselkonzepte:

• CSS -Gitter ermöglicht die Erstellung komplizierter Layouts, die zuvor herausfordernd oder unmöglich zu erreichen sind. Es hat im Oktober 2017 weit verbreitete Browserunterstützung erhalten.
• anwenden display: grid auf ein Element legt einen Gitterformatungskontext fest, wodurch das Element in einen Block-Ebene-Behälter und seine Kinder in Gitterelemente umgewandelt werden, die in Zeilen und Spalten angeordnet sind.
• Die Eigenschaften grid-template-rows und grid-template-columns definieren die Anzahl und Größe von Zeilen und Spalten mit einer leeren getrennten Trackliste (z. B. Längen, Prozentsätze, auto, min-content, max-content,
,
• ,
).
• grid-template implizite Gitter verarbeiten automatisch Gitterelemente, die explizit definierte Zellen überschreiten, was auf der Basis der automatischen Größe auf der Grundlage des Inhalts definiert ist. repeat() auto-fit Die auto-fill Shorthand kombiniert Zeilen- und Spaltendefinitionen. Die Funktion
vereinfacht wiederholte Spalten oder Zeilen, während

und

dynamisch die Spalte/Zeilenzahlen einstellen.

Der Kontext der Netzformatierung: display: grid

1. löst einen Gitterformatierungskontext mit diesen Effekten aus:
Das Element wird zu einem Element auf Blockebene.
Kinderelemente (oder Textknoten) werden blockähnliche Gitterelemente.

In horizontalen Schreibmodi stimmen die Zeilenhöhen dem höchsten Element überein, es sei denn, es wird explizit eingestellt. Vertikale Schreibmodi verwenden die Länge des längsten Elements.

display: inline-grid

verhält sich ähnlich, aber der Container bleibt Inline-Ebene.

Gitterlayouts definieren: grid-template-rows grid-template-columns Geben Sie nach der Definition des Gitterbehälters Zeile und Spaltenzahlen mit und

an. Diese akzeptieren eine

Trackliste , eine von speichern getrennte Zeichenfolge, die die Namen und Größen für jede Zeile oder jede Spaltenposition definiert. .

explizit gegenüber impliziten Gittern:

und explizites Gitter definiert alle Zellen. Ein implizites Gitter erweitert das Netz, um zusätzliche Elemente über die explizit definierten Zellen hinauszuhalten. Implizite Netzelemente automatisch Größe, erweitert in den Inhalt oder das Füllen des verbleibenden Platzes. und grid-auto-rows Steuerungsgrößen für implizite Gitterelemente, aber die Verwendung von grid-auto-columns verhindert den Inhaltsüberlauf. minmax()

Flexible Gitter mit Flex -Einheiten (): fr

Flex -Einheiten () fr stellen Fraktionen des verfügbaren Raums dar und bieten eine proportionale Größe. Sie sind Verhältnisse, keine absoluten Längen und sind mit anderen Längeneinheiten oder . calc() unvereinbar

Shorthand: grid-template

Die Eigenschaft

kombiniert grid-template und grid-template-rows für die Übersicht. grid-template-columns

Wiederholende Zeilen und Spalten (): repeat()

Die Funktion

vereinfacht das Erstellen von Wiederholungsmustern: repeat(). repeat(number, track list) und auto-fit passen Sie die Anzahl der Wiederholungen dynamisch an, die auf dem verfügbaren Speicherplatz basieren. auto-fill Einstellt die Gleisgrößen; auto-fit fügt anonyme Tracks hinzu. auto-fill

Weiteres Lernen:

Dies ist eine grundlegende Einführung; Zahlreiche Ressourcen bieten detailliertere Informationen, einschließlich der CSS-Gitterspezifikation selbst, Rachel Andrews Grid mit Beispiel , Jen Simmons 'experimentellem Layout-Labor und Layout-Land-YouTube-Kanal sowie CSS-Tricks' "Ein vollständiger Leitfaden zum Grid. "

Schlussfolgerung:

CSS Grid ist ein leistungsstarkes Werkzeug. Dieser Überblick bietet eine Grundlage für die weitere Erforschung seiner Fähigkeiten.

Das obige ist der detaillierte Inhalt vonErstellen von Layouts mit CSS -Gitter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!