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

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

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

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

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

Wiederholende Zeilen und Spalten (): repeat()

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!