Netz– Ein kompaktes Add-on für einen Raid oder eine Gruppe bietet die umfangreichsten Einstellungen.
Zeigt kompakt die Zusammensetzung und den aktuellen Zustand eines Überfalls oder einer Gruppe in Form eines Rasters an, um den Zustand des Überfalls bei einer schnellen Inspektion besser erkennen zu können, was sehr nützlich ist, um die Konzentration im Kampf aufrechtzuerhalten. Damit können Sie die Situation schnell einschätzen, ohne wertvolle Zeit zu verschwenden, ohne Ihre Aufmerksamkeit zu fokussieren und ohne einen Blick in die einzelnen Spielerbilder zu werfen. Es zeigt wirklich viele notwendige und nützliche Informationen über Spieler an. Ermöglicht Ihnen zu konfigurieren, welche Informationen Sie sehen möchten und wie sie angezeigt werden.
Grid umfasst Module:

• Gesundheit
• Mana/Energie
• Eingehende Behandlung
• Aggro-Modul (Bedrohungsstufe)
• Buffs/Debuffs
• Distanz
• Betreuung von Haustieren und Fahrzeugen

Interessanterweise ist die Darstellung von Informationen je nach aktuellem Stand umgesetzt.
Um es anzuzeigen, können Sie Folgendes verwenden:

• Text in der Mitte.
• Symbol in der Mitte.
• Der Rahmenrahmen jedes Spielers.
• Rahmentransparenz.
• Farbige Quadrate an den vier Ecken.

Da das Add-on auf Blockbasis aufgebaut ist, wird es für diejenigen, die wissen, wie man Add-ons schreibt, nicht schwierig sein, neue Statusmodule hinzuzufügen oder Indikatoren anzuzeigen. Dies sorgt für mehr Individualität und ermöglicht es Ihnen, das Add-on genau auf Ihre Bedürfnisse abzustimmen.

Einrichten des Grid-Addonsüber das Symbol auf der Minikarte oder über den Chat-Befehl /grid

Obwohl das Einstellungsmenü aufgrund der riesigen Funktionalität sehr einschüchternd aussieht, rate ich Ihnen, ein paar Minuten damit zu verbringen, die Optionen zu erkunden, um den größtmöglichen Informationsgehalt für Sie zu erzielen.

Viele, die dieses Add-on zum ersten Mal installiert haben und einige seltsame graue Quadrate mit Punkten in den Ecken sehen, spucken aus und nehmen es sofort zurück. Aber mit der richtigen Abstimmung kann es jedes Aussehen nach Ihrem Geschmack annehmen und verfügt über enorme Fähigkeiten.
Leider gibt es online nicht viele organisierte Informationen zur Einrichtung. Vorhandene Handbücher in Bildern können einem nur dabei helfen, Häkchen auf Screenshots blind zu kopieren, aber nicht jeder versteht, was genau sie tun. Ich hoffe, ich kann Ihnen hier auf verständliche und detaillierte Weise erklären, wie Sie das Grid funktionaler gestalten und Ihnen sagen können, welche Einstellungen wofür verantwortlich sind.
Dieser Leitfaden enthält viele Bücher und ein Minimum an Abbildungen, sodass Leute, die das Lesen satt haben, das Thema sofort verlassen können :)
Grid-Ergänzungen

Grid ist ein modulares Add-on; es gibt viele Add-ons, die ihm erweiterte Funktionen verleihen. Ich werde die meiner Meinung nach wichtigsten Module auflisten. Sie erhöhen die Funktionalität und Benutzerfreundlichkeit des Grids erheblich, daher empfehle ich jedem, sie unbedingt auch zu installieren.

. Ergänzung aus der Kategorie haben müssen- Fügt Frames Mana-/Energie-/Wutstreifen hinzu. Dies fehlt in einem regulären Raster schmerzlich.

. Fügt bekannte Debuffs für beliebte Raid-Instanzen BC und VOTLK hinzu.

. Ein sehr praktischer Ersatz für das Standard-Grid-Display. Ermöglicht Ihnen, in jeder Ecke zwei Symbole für den Charakterstatus (Buffs, Debuffs, Mangel an Leben oder Mana usw.) anzuzeigen. Die Symbole sind nicht nur ein Quadrat einer bestimmten Farbe wie in einem normalen Raster, sondern ein vollständiges Diagramm. reduziertes Symbol des angewandten Buffs/Debuffs. Es gibt auch ein Addon – hier können Sie in jede Ecke 3 Symbole einfügen. Aber schauen Sie selbst, damit es nicht zu einer Überfülle an Informationen kommt, die Sie nicht verstehen können.

. Ermöglicht es Ihnen, zu sehen, welche Hots an Raid-Spielern hängen, um die richtigen Behandlungsprioritäten auszuwählen.

. Fügt voreingestellte Rahmentypen für verschiedene Situationen hinzu: wenn Sie alleine aufsteigen, wenn Sie in einer Gruppe von 5 Personen sind, in einem Raid mit 10, 25 oder 40 Personen, auf dem Schlachtfeld oder in der Arena. Für alle diese Fälle können Sie auch wählen, ob im Raster Haustiere angezeigt werden sollen. Wenn Sie beispielsweise das heroische Naxxramas betreten, wechselt Ihr Raster sofort zur Ansicht für 25 Personen und zur normalen Ansicht für 10 Personen.

Früher war der Zusatz GridStatusIncomigHeals erforderlich, der die eingehende Heilung des Charakters anzeigte, aber jetzt ist dieses Modul veraltet und das Grid selbst kann eingehende Heilung und Res anzeigen (andere sehen sie, wenn Sie über die erforderlichen Bibliotheken verfügen – LibHealComm-3.0 und LibResComm- 1,0). Die gleiche Situation besteht bei GridStatusReadyCheck (Überprüfung des Raids auf Bereitschaft). Der Autor empfiehlt dringend, dieses Add-on zu entfernen, wenn es installiert ist, da es jetzt Teil des Grid-Kerns ist.
Aufbau

Um die Rastereinstellungen zu aktivieren, müssen Sie auf das Symbol auf der Minikarte klicken oder den Befehl /grid config im Chat eingeben.
Das Raster besteht aus drei Haupteinstellungsabschnitten: Standort, Status Und Rahmen.

Ich werde kurz den Hauptzweck und die Funktionen dieser Abschnitte beschreiben.

Standort. Hier wird das allgemeine Erscheinungsbild des Rasters konfiguriert, die Größe, Farbe und Transparenz des „Hintergrunds“ des allgemeinen Rahmens, der Abstand zwischen den Rahmen und der Maßstab des Ganzen angepasst.

Status. Dieser Abschnitt enthält alle möglichen Spielerstatus, in denen er existieren kann. Was Status? Dies sind zum Beispiel der Name des Spielers, Buffs und Debuffs, Gesundheit, Mana, Fahrzeug, Bereitschaft, Entfernung zum Spieler usw., im Allgemeinen alles, was sich auf seinen Körper und seine Angelegenheiten auswirken kann. Für jeden Status können Sie seine Farbe und Priorität zuweisen. Die Farbe wird verwendet, um diesen Status auf dem Rahmen anzuzeigen, und die Priorität bestimmt, ob sich dieser Status mit anderen überlappt, wenn sie an derselben Stelle angezeigt werden.
In den Einstellungen jedes Status gibt es auch offensichtliche Kontrollkästchen, mit denen Sie nur die Status anzeigen können, die Sie angewendet haben, den Radius des Status und seine Dauer steuern usw.
Besonders hervorzuheben ist der Unterabschnitt Status ->Auren, wo Sie neue, dem Grid unbekannte Buffs und Debuffs hinzufügen können, die Sie verfolgen möchten.

Rahmen. In diesem Abschnitt wird festgelegt, wo genau die oben beschriebenen Status angezeigt werden sollen. Es gibt standardmäßige „Vertrautheiten“, dies sind die Ecken des Spielerrahmens, das Symbol in der Mitte, der Text in der Mitte, der Rand des Rahmens, die Farbe der Lebensleiste, die Farbe der Manaleiste usw. Verschiedene Grid-Module können zusätzliche Indikatoren hinzufügen. Sie können jedem dieser Indikatoren einen oder mehrere Status zuordnen. In einer Ecke werden beispielsweise Krankheiten und Gifte angezeigt, in einer anderen verschiedene Schilde, in der dritten Hots, in der Mitte - Raid-Debuffs und in der Lebensleiste werden niedrige HP oder beispielsweise das gleiche Gift angezeigt (beim Erhalt des Status, Der Lebensbalken nimmt dann die Farbe an, die im Abschnitt „Status“ für diesen Status ausgewählt wurde.
Von besonderer Bedeutung ist der Unterabschnitt Rahmen ->Zusätzlich, er ist am meisten für Grids Aussehen verantwortlich. Hier können Sie zusätzliche Indikatoren aktivieren und vor allem die Länge und Breite der Player-Rahmen, ihre horizontale oder vertikale Anzeige, die Größe und Art der Schriftart für Beschriftungen konfigurieren, die Textur der Rahmen und die Größe der Symbole für Status auswählen. Auch hier können Sie die Größe und Position des Manastreifens des Moduls anpassen GridManaBars, Symbolparameter aus dem Modul GridIndicatorCornerIcons und andere Module. Hier können Sie „ein Grid in einen HealBot verwandeln“.

Also, grob gesagt, im Abschnitt Status Die ANSICHT verschiedener Buffs/Debuffs auf Grid-Frames wird konfiguriert und im Abschnitt Rahmen- LAGE dieser Buffs/Debuffs auf Grid-Frames.

Einstellungen

Hier beschreibe ich das Grid-Setup am Beispiel meiner Konfiguration, vorausgesetzt, dass alle oben beschriebenen Add-Ons installiert sind. Vielleicht gefällt jemandem das Standard-Aussehen des Grids und er ist zufrieden Standartfunktionen, aber der Geschmack und die Farbe... Mich beeindrucken mehr die horizontalen langen grünen Platten, irgendwie wirken sie klarer.
Es sollte berücksichtigt werden, dass ich einen 22-Zoll-Breitbildbildschirm mit einer Auflösung von 1680 x 1050 habe, sodass Besitzer von Monitoren mit hervorragender Auflösung möglicherweise die Einstellungen an ihren Grid-Standort anpassen müssen.

Allgemeines einrichten Aussehen Grida

Gehen Sie zum Haupt-Lesezeichenbereich Standort. Hier gibt es eine Gruppe von Schiebereglern, die die Größe des „Hintergrunds“ des Gesamtrahmens, den Abstand zwischen den Spielerrahmen und den Maßstab des Ganzen anpassen. Ich habe diese Werte jeweils auf die Positionen 1, 6 und 1 eingestellt. Unten können Sie die Hintergrundfarbe und die Rahmenfarbe festlegen. Ich habe den Hintergrund zu 90 % grau und transparent gemacht und den Rand im Unterabschnitt vollständig entfernt Standort ->Zusätzlich indem Sie „Keine“ in die Dropdown-Liste „Rahmentexturen“ einfügen.
Im Kapitel Rahmen Wir stellen die Länge des Textes in der Mitte auf mehr als die standardmäßigen ein bis drei Zeichen ein, sodass der Name der Figur normalerweise sichtbar ist, und stellen die gewünschte Transparenz für die Behandlungsleiste ein. Aktivieren Sie außerdem das Kontrollkästchen „Streifenfarbe umkehren“.
Als nächstes gehen wir zum Unterabschnitt Frames -> Erweitert. Großes Betätigungsfeld!
Wir schauen direkt in die Mitte der Einstellungsseite und sehen zwei große Dropdown-Listen: Textausrichtung Und Rahmenausrichtung. In beiden Fällen stellen wir es auf „HORIZONTAL“. Oben befindet sich ein Schieberegler Rahmenhöhe Ich denke, es besteht kein Grund zur Erklärung. Für mich beträgt dieser Parameter 22 Einheiten. Unten ist der Parameter Eckgröße, ist für die Größe der klassischen Quadrate an den Ecken des Rahmens verantwortlich – 7 Einheiten. Als nächstes folgt die Schriftgröße für die Inschriften in der Mitte. Ich habe es auf 10 eingestellt, man kann mehr machen, aber dann passen weniger Buchstaben aus dem Status. Und endlich, Rahmenbreite. Wir legen den für Sie passenden Wert fest, bei mir sind es 90.

Im Unterabschnitt Frames -> Erweitert -> Manaleiste Wählen Sie die Position des Manastreifens von unten (oder von oben, je nach Wunsch) und passen Sie seine Breite an. In meinem Fall sind es 25.
Gehen wir zum Unterabschnitt Status -> Gesundheit -> Einheitengesundheit. Die Farbe und Transparenz stellen wir nach Geschmack ein, bei mir ist es zum Beispiel grün, 90 %. Bei Bedarf können Sie die Checkbox „Klassenfarbe verwenden“ aktivieren, dann entsprechen die Farben aller Streifen den Standard-Klassenfarben (die im Unterabschnitt auch geändert werden können). Farben Abschnitt Rahmen).
Unser Rahmen hat also ein mehr oder weniger passendes Aussehen erhalten – etwa so:

Status einrichten
Gehen wir zum Abschnitt Status.

Zuerst müssen Sie die Buffs und Debuffs hinzufügen, die im Raster fehlen und auf den Frames angezeigt werden sollen. Gehen Sie dazu zum Abschnitt Status -> Auren und schreiben Sie den Namen des gewünschten Buffs oder Debuffs in die entsprechende Zeile und drücken Sie dann die Eingabetaste. Erscheint in Auren Neuer Abschnitt mit dem Namen des hinzugefügten Buffs oder Debuffs, in dem Sie dessen Aussehen anpassen können.
Das Modul hilft sehr GridStatusRaidDebuff, das uns die Drecksarbeit abnimmt, indem es viele Raid-Debuffs hinzufügt. Diese Debuffs befinden sich in einem separaten Unterabschnitt Status -> Raid-Debuffs.
Für mich selbst habe ich zum Beispiel hinzugefügt: Erdschild, Göttlichen Schutz, Eisstoß(Kel'Thuzads Fähigkeit, ich musste sie unter all den anderen Raid-Debuffs hervorheben, die im Modul enthalten sind GridStatusRaidDebuff, und installieren Sie es auf einem anderen Indikator) und einige andere.
Wir legen Farben und andere Parameter für alle für uns interessanten Status fest. Zum Beispiel giftiges Grün für Gift, Lila für magische Effekte, Braun für Krankheit usw.
Bei Bedarf können Sie die Farbe der Gesundheitsleiste so konfigurieren, dass sie sich ändert, wenn der Charakter niedrige HP hat. Gehen Sie dazu zum Unterabschnitt Status -> Gesundheit und legen Sie im Unterabschnitt den Wert „Gesundheitsschwelle“ fest Gesundheitsdefizit um ca. 66-90 % (was bequemer ist) und den Wert „Gesundheitsschwelle“ im Abschnitt Warnung: Niedrige HP um ca. 33 %. Im ersten Fall stellen wir die Farbe auf Gelb oder Orange ein, im zweiten Fall auf Warnrot. Vergessen Sie nicht, Ihre Prioritäten zu setzen. Wenn der Charakter nun ein wenig geschlagen wird, wird sein Lebensbalken orange, und wenn er nur noch ein Drittel übrig hat, wird er rot.
Im Kapitel Status -> Entfernung Wir bestimmen die Farben für die Zeichen um uns herum in verschiedenen Radien. Sie können beispielsweise eine zunehmend transparente grüne Farbe einstellen, wenn sich die Figur entfernt. Dann ist im Bild immer zu sehen, wer näher als 10 Meter von uns entfernt ist. Dies kann manchmal sehr wichtig sein (z. B. bei Begegnungen, bei denen man nicht nahe beieinander stehen kann) und ermöglicht es Ihnen auch festzustellen, wer nicht in der Nähe ist Aufgrund der Entfernung lohnt es sich, einen Heilungsversuch zu unternehmen.
Im Kapitel Status -> Einheitenname Sie können die Farbe festlegen, mit der der Name auf den Rahmen geschrieben wird, oder die Klassenfarbe verwenden.
Passen Sie die übrigen Status an Ihren Geschmack und Bedarf an, indem Sie ihnen Farben und Prioritäten zuweisen.

Indikatoren einrichten

Jetzt müssen Sie Größe, Position und Aussehen der Symbole und Beschriftungen konfigurieren. Dies geschieht im Abschnitt Rahmen.
Im Unterabschnitt Frames -> Erweitert Schalten Sie die zweite Textanzeige in der Mitte mit einem Häkchen ein. Wir aktivieren auch die Anzeige „Farbe der Gesundheitsleiste“ (diese zeigt uns die Alarmfarben für einen niedrigen Gesundheitsschwellenwert an, der oben konfiguriert wurde).
Die beiden Schieberegler unten sind für das Symbol in der Mitte des Player-Rahmens, seine Größe und die Dicke des Rahmens verantwortlich. Die nächsten beiden Häkchen sind auch für das zentrale Icon zuständig. Die erste ist „Mehrere Symboltexte aktiviert“. Falsche Übersetzung, das Wesentliche ist folgendes: Wenn diese Option aktiviert ist, sehen wir auf dem Symbol eine Zahl, die angibt, wie viele Stapel Buffs/Debuffs an diesem Charakter hängen. Zum Beispiel, wie viele Ladungen Erdschild oder wie viele Marken Reiter aus Naxxramas. Die zweite Option ist „Symbol-Abklingzeitrahmen aktiviert“. Wie Sie wahrscheinlich bereits vermutet haben, ist es dafür verantwortlich, die Abklingzeit der Fertigkeit auf dem zentralen Symbol anzuzeigen.

Ecksymbole aus dem Modul GridIndicatorCornerIcons werden im Unterabschnitt konfiguriert Rahmen -> Erweitert -> Symbol (Ecken). Die Größe aller Symbole beträgt 10, die Verschiebung entlang der X-Achse beträgt -2 und entlang der Y-Achse - +2. Sie können mit der Größe und Platzierung der Symbole herumspielen.

Statusanzeige einrichten

Alle notwendigen Indikatoren sind aktiviert, jetzt kommen wir zur Hauptsache – Sie müssen sie zuweisen, um die oben konfigurierten Status anzuzeigen.
Wählen Sie nacheinander Unterabschnitte aus dem Lesezeichen aus Rahmen und überprüfen Sie die Status, die auf diesem Indikator angezeigt werden sollen. Ihr Aussehen haben wir oben im Abschnitt bereits konfiguriert Status. Sie können für einen Bekannten mehrere Status auswählen, hier kommt die Prioritätsskala ins Spiel. Wenn ein Spieler gleichzeitig alle diesem Ort zugewiesenen Buffs/Debuffs erhält, wird derjenige mit der höchsten Priorität angezeigt. Um Platz zu sparen, empfiehlt es sich außerdem, einem Indikator diejenigen Status zuzuordnen, die sich nicht überschneiden und nicht gleichzeitig empfangen werden. Sie können beispielsweise den Zustand eines Geistes und einen Raid-Debuff in einem Symbol kombinieren – es ist klar, dass der Spieler im Todeszustand keine Debuffs hat, und wenn er Debuffs hat, dann ist er kein Geist.

Rasteraufbau

Wäre das Raster lediglich eine Ansammlung proportional großer Zeilen und Spalten, wäre es von geringem Nutzen. Zum Glück ist er nicht so. Um das volle Potenzial des Rasters auszuschöpfen, können Sie die Art und Weise ändern, wie Sie die Größe jeder Zeile und Spalte festlegen. Das Grid-Element unterstützt die folgenden Größenänderungsstrategien:

Absolute Dimensionen

Die genaue Größe wird über geräteunabhängige Einheiten ausgewählt. Dies ist die am wenigsten praktische Strategie, da sie nicht flexibel genug ist, um mit sich ändernden Inhaltsgrößen, der Größenänderung von Containern oder der Lokalisierung umzugehen.

Automatische Größen

Jede Zeile und Spalte erhält genau den Platz, den sie benötigt, und nicht mehr. Dies ist einer der bequemsten Modi zur Größenänderung.

Proportionale Abmessungen

Der Raum wird zwischen einer Gruppe von Zeilen und Spalten aufgeteilt. Das Standardinstallation für alle Zeilen und Spalten.

Für maximale Flexibilität können Sie diese kombinieren verschiedene Modi Größenänderungen. Beispielsweise ist es oft praktisch, ein paar Zeilen mit automatischer Größenanpassung zu erstellen und dann eine oder zwei andere Zeilen den verbleibenden Platz zu teilen, indem ihre Größen proportional angepasst werden.

Der Größenänderungsmodus wird mithilfe der Eigenschaft „Width“ eines ColumnDefinition-Objekts oder der Eigenschaft „Height“ eines RowDefinition-Objekts festgelegt, indem ihm eine Zahl oder Zeichenfolge zugewiesen wird. Zum Beispiel:

Diese Syntax stammt aus der Welt des Internets, wo sie verwendet wird HTML-Seiten mit Rahmen. Wenn Sie eine Mischung aus proportionaler Größenanpassung und anderen Modi verwenden, dann proportional veränderliche Zeichenfolge oder die Spalte erhält den gesamten verbleibenden Platz.

Um den verbleibenden Platz in ungleiche Teile aufzuteilen, können Sie eine Gewichtung zuweisen, die vor dem Sternchen angegeben werden sollte. Wenn Sie beispielsweise zwei Reihen mit proportionaler Größe haben und die Höhe der ersten halb so hoch sein soll wie die Höhe der zweiten, würden Sie den verbleibenden Platz wie folgt aufteilen:

Dadurch wird dem Raster mitgeteilt, dass die Höhe der zweiten Reihe doppelt so hoch sein sollte wie die Höhe der ersten Reihe. Zur Aufteilung des zusätzlichen Platzes können beliebige Zahlen angegeben werden.

Es ist einfach, die programmgesteuerte Interaktion zwischen ColumnDefinition- und RowDefinition-Objekten zu organisieren. Sie müssen nur wissen, dass die Eigenschaften „Width“ und „Height“ Objekte vom Typ sind GridLength. Um eine GridLength zu erstellen, die eine bestimmte Größe darstellt, übergeben Sie einfach den entsprechenden Wert an den GridLength-Konstruktor. Um ein GridLength-Objekt zu erstellen, das eine proportionale Größe (*) darstellt, müssen Sie eine Zahl an den GridLength-Konstruktor und einen GridUnitType.Start-Wert als zweites Argument an den Konstruktor übergeben. Um anzuzeigen automatischer Wechsel size verwendet eine statische Eigenschaft GridLength.Auto.

Nachfolgend finden Sie ein Beispiel für ein Rasterlayout mit automatischer und proportionaler Größenanpassung:

OK Stornieren

Hallo zusammen. Der Februar-März 2017 war für viele, die mit HTML und CSS arbeiten, denkwürdig, da die meisten Browser Updates veröffentlichten, darunter auch Updates für CSS. Es ist jetzt möglich, die CSS-Grid-Layout-Spezifikation ohne Flags in den folgenden Browsern zu verwenden: Firefox 52, Chrome 57, Opera 44, Safari 10.1. Ich denke, Sie können sich vorstellen, welcher Browser zurückbleibt. Genauer gesagt unterstützt es die alte Version der Spezifikation. Doch die Entwickler dieses Browsers geben ihr Bestes, um die neue Spezifikation umzusetzen. Die Einführung der Unterstützung für die neue CSS-Grid-Layout-Spezifikation ist das bedeutendste Ereignis der letzten fünf Jahre. Diese Spezifikation wird den Ansatz zur Entwicklung von Benutzeroberflächen völlig verändern. Und das ist cool.

Ich verwende das flexible Box-Layout

Viele Leute stellen die Frage: „Stopp, ich benutze Flexbox, warum brauche ich noch andere Grids?“ Die Frage ist mehr als angemessen. CSS Grid wird Flexbox nicht ersetzen und umgekehrt. Der erste Unterschied besteht darin, dass Flexbox nur in einer Dimension funktioniert. Das bedeutet, dass wir Flex-Elemente nur entlang der Hauptachse oder entlang der Querachse platzieren können. Wir können Flexelemente nicht auf mehreren Achsen gleichzeitig platzieren. CSS Grid wiederum ermöglicht es uns, mit Markup im zweidimensionalen Raum zu arbeiten und Inhalte in beiden Dimensionen auszurichten. Mir gefällt die Art und Weise, wie Tab Atkins diesen Unterschied erklärt.

Eine der größten Herausforderungen bei der Entwicklung von Benutzeroberflächen besteht darin, dass Sie (in den meisten Fällen) das Markup ändern müssen, wenn Sie das Design, die Funktionalität oder das Verhalten eines Blocks ändern. Mit CSS Grid können Sie die Position von Rasterelementen ändern, ohne den HTML-Code selbst zu ändern. Unten finden Sie ein Beispiel für einfaches Markup mit Flexbox und CSS Grid.

Grundbegriffe

Bevor Sie mit CSS Grid arbeiten, müssen Sie einige Grundbegriffe verstehen. Die gesamte Spezifikation basiert auf diesen Begriffen.

Gitterbehälter ist eine Reihe sich kreuzender horizontaler und vertikaler Gitterlinien, die den Raum eines Gittercontainers in Gitterbereiche unterteilen, in denen Gitterelemente platziert werden können. In einem Rastercontainer gibt es zwei Sätze von Rasterlinien: einer definiert die Spaltenachse, der andere definiert die Zeilenachse.

Gitterlinien- Dies sind die horizontalen und vertikalen Trennzeichen des Gittercontainers. Diese Zeilen befinden sich auf beiden Seiten einer Spalte oder Zeile. Der Autor kann diesem Element einen Namen oder einen numerischen Index geben, der später in Stilen verwendet werden kann. Die Nummerierung beginnt bei eins. Eine wichtige Nuance: Dieses Element reagiert empfindlich auf den Schreibmodus, der für Ihre Ressource verwendet wird. Wenn Sie beispielsweise Arabisch oder eine andere Sprache verwenden, die von rechts nach links geschrieben wird, beginnt die Zeilennummerierung von rechts.

Rasterspur ist der Abstand zwischen zwei benachbarten Gitterlinien, vertikal oder horizontal.

Gitterzelle ist die kleinste unteilbare Einheit eines Rastercontainers, die beim Positionieren von Rasterelementen referenziert werden kann. Wird am Schnittpunkt von Rasterzeile und Rasterspalte gebildet.

Gitterbereich ist der Raum innerhalb eines Gittercontainers, in dem ein oder mehrere Gitterelemente platziert werden können. Dieses Element kann aus einer oder mehreren Gitterzellen bestehen.

Jedes Element ist eng miteinander verbunden und für einen bestimmten Teil des Gittercontainers verantwortlich.

Erstes CSS-Rasterlayout

Wir haben die Grundbegriffe behandelt. Es ist Zeit, unser erstes Rasterlayout zu erstellen. Nichts Kompliziertes, nur ein einfaches Layout mit drei Zeilen und drei Spalten, um Ihnen den Einstieg in die Grundlagen zu erleichtern. Unten sehen Sie ein Beispiel.
In der ersten Option aus dem Beispiel erstellen wir jeweils drei Spalten der Größe 150px 1fr 150px und drei Zeilen der Größe 50px auto 50px. Achten Sie auf folgende Werte: 1fr, auto. Lassen Sie uns herausfinden, was diese Werte sind.

1fr ist eine spezielle Maßeinheit, die in dieser Spezifikation eingeführt wird. Es wird nicht in bestimmten Einheiten (px, em, rem usw.) gemessen. Daraus folgt, dass wir es nicht zusammen mit der Funktion calc() verwenden können. Diese Maßeinheit darf nicht kleiner als eins sein und kann auch keine negativen Werte annehmen. Sie wird berechnet, nachdem alle anderen Werte außer fr berechnet wurden.

Auto – verhält sich recht interessant und verwendet einen cleveren Algorithmus zur Größenberechnung. In manchen Situationen scheint es, dass diese Maßeinheit genau wie fr funktioniert. Aber das ist nicht so. Der Hauptunterschied besteht darin, dass auto vor der Berechnung von fr berechnet wird. Das müssen Sie sich merken. Sie können dieses Verhalten in der zweiten und dritten Version des obigen Beispiels sehen.

Für die Markierung von Spalten und Zeilen gelten folgende Regeln:

Grid-template-columns: 150px 1fr auto; Rastervorlagenzeilen: 50 Pixel automatisch 50 Pixel;
Die verkürzte Form sieht so aus:

Rastervorlage: 50px automatisch 50px / 150px 1fr automatisch;

Typische Rastervorlage

Lassen Sie uns eine einfache Vorlage erstellen, mit der wir alle vertraut sind. Nichts Kompliziertes, die Vorlage besteht aus den folgenden Tags: Kopfzeile, Navigation, Seite, Artikel, Fußzeile. Die überwiegende Mehrheit der Internetressourcen verwendet diese Vorlage. Nur wissen Sie, auch hier einfache Vorlage Folgendes Problem ist zu beobachten: „Ich bin Designer, so möchte ich es haben.“ Ich bin Entwickler, ich kann das nicht machen.“ Mit der Einführung des CSS-Grid-Layouts sollte dieses Problem gegen Null tendieren.
IN in diesem Beispiel Wir werfen einen Blick auf einige weitere CSS-Grid-Layout-Eigenschaften. Das erste ist Grid-Template-Areas . Es wird verwendet, um benannte Container-Rasterbereiche zu erstellen, die keinem bestimmten Rasterelement zugeordnet sind. Die Syntax ist sehr praktisch, wir können sofort sehen, welche Art von Vorlage ausgegeben wird. Die zweite Eigenschaft ist Grid-Area . Es wird genutzt für untergeordnetes Element Gitterbehälter. Gibt an, in welchem ​​benannten Bereich das Rasterelement platziert werden soll.

Schauen wir uns die erste Option „grid-template-areas“ an:

Grid-Template-Bereiche: „Header Header“ „Nav Main“ „Footer“.
Ein oder mehrere aufeinanderfolgende Symbole. (Punkt) haben eine besondere Bedeutung. Wenn dieses Symbol verwendet wird, stellt der Browser es als Null-Token dar, was wiederum Folgendes bedeutet: An seiner Stelle wird kein benannter Container-Grid-Bereich erstellt und es kann kein Grid-Element darin platziert werden.

Wenn wir für kein untergeordnetes Rasterelement eine Grid-Area-Eigenschaft angeben, verteilt der Browser diese Elemente automatisch. Dieses Verhalten lässt sich daran erkennen letzte Option, gegebenes Beispiel oben.

Beispiele:

minmax() – Funktion

Ermöglicht das Festlegen von Mindest- und Höchstwerten für eine Zeile/Spalte. Wird in Eigenschaften verwendet, in denen Sie die Größe festlegen müssen: Grid-Template-Rows: , Grid-Template-Columns: , Grid-Template: .

Minmax(min_value, max_value)

Der Wert könnte sein:

• px, em, rem, ...- Längeneinheiten (100px)
• % - Zinsen (10%)

fr- flexible Größen. Nur für max. Bedeutungen.

Maximaler Inhalt- die kleinstmögliche Zellengröße, bei der der Inhalt frei hineinpasst. Befindet sich beispielsweise Text in einer Zelle, entspricht die ideale Zellenbreite der gesamten Länge des Textes (eine Zeile ohne Unterbrechungen).

Mindestinhalt- die kleinste Größe, bei der die Zelle nicht überläuft. Befindet sich beispielsweise Text in einer Zelle, entspricht die Breite dem längsten Wort im Text.

Auto- hängt davon ab, ob er als Maximal- oder Minimalwert in der Funktion minmax() verwendet wird:

• wenn als Maximum, dann dasselbe wie max-content .
• Wenn es sich um ein Minimum handelt, entspricht der Wert der minimal möglichen Größe für die Zelle. Diese Größe unterscheidet sich von „min-content“ und wird durch die Eigenschaften „min-width“ oder „min-height“ festgelegt.

Beispiele:

Nutzungsmöglichkeiten:

Rastervorlagenspalten: minmax(100px, 200px) 1fr 1fr; Rastervorlagenspalten: minmax(200px, 50%) 1fr 1fr; Rastervorlagenspalten: minmax(200px, 1fr) 1fr 1fr; Rastervorlagenspalten: minmax(min-content, max-content) 1fr 1fr; Rastervorlagenspalten: minmax(auto, auto) 1fr 1fr; Rastervorlagenspalten: wiederholen (automatische Anpassung, minmax (200 Pixel, 1 Fr));

Wenn die angegebene Maximalwert Wenn sich herausstellt, dass der Wert unter dem Mindestwert liegt, wird er ignoriert und nur der Mindestwert funktioniert. Bedeutung.

Gitterzeilenlücke: Gitterspaltenlücke: Gitterlücke:

Grid-Row-Gap: Legt den Abstand zwischen den Zeilen fest.
Grid-Column-Gap: Legt den Abstand zwischen den Spalten fest.
Grid-Gap: Legt eine Lücke für Zeilen und Spalten gleichzeitig fest. Dies ist eine Abkürzung für die beiden vorherigen Eigenschaften. Wenn Sie einen Parameter angeben, wird dieser für beide Werte gesetzt.

// Syntax: Grid-Row-Gap: Größe; Gitterspaltenlücke: Größe; Gitterlücke: Größe Größe; /* Zeilenspalte */ Grid-Gap: Größe;

Beispiele:

Gitterspaltenlücke: 10px; Rasterzeilenabstand: 15px;

Hinweis: Das Präfix „grid-“ wird entfernt und die Eigenschaftsnamen werden zu „column-gap:“ und „row-gap:“. Chrome 68+, Safari 11.2 und Opera 54+ unterstützen bereits Eigenschaften ohne dieses Präfix.

align-content: justify-content: place-content:

Richtet Zeilen/Spalten aus. Die Gitterzellen werden ausgerichtet, nicht die Elemente innerhalb der Zellen. Um Elemente auszurichten, verwenden Sie: justify-items , align-items , place-items .

// Syntax: align-content: value; // richtet Zeilen vertikal aus ↓ justify-content: value; // richtet Spalten horizontal aus ←→ place-content: value; // Abkürzung: wird beide Werte setzen place-content: align-content justify-content; // Kurzschrift

Der Wert könnte sein:

• dehnen (Standard)- streckt Zeilen/Spalten (Zellen) vollständig. Der gesamte Behälterraum ist gefüllt. Es macht nur dann Sinn, wenn die Größe der Zeilen/Spalten nicht starr festgelegt ist (sie sind aus Gummi). Wenn sie nicht aus Gummi sind, funktioniert es wie bei start .
• Start- Reihen/Spalten werden zum Anfangsrand des Behälters hin dicht aneinander gepackt.
• Ende- Reihen/Spalten werden zum Endrand des Behälters hin dicht aneinander gepackt.

• Center- Reihen/Spalten werden dicht aneinander gepackt und in der Mitte des Behälters platziert.

• Raum-um - Freiraum gleichmäßig auf die Zeilen/Spalten verteilt und an den Rändern hinzugefügt. Es stellt sich heraus, dass die äußeren Reihen/Spalten nicht gegen die Kanten des Behälters gedrückt werden, sondern der Abstand zum Rand halb so groß ist wie zwischen den Reihen/Spalten.
• raumgleichmäßig- das Gleiche wie space-around, nur der Abstand zu den Rändern des Containers ist derselbe wie zwischen den Zeilen/Spalten.
• Raum dazwischen- Die äußeren Reihen/Spalten werden gegen die Ränder des Behälters gedrückt und der Freiraum wird gleichmäßig zwischen den Reihen/Spalten verteilt.

Seltene Werte:

Beispiele:

Vollständige Syntax:

// Syntax: align-content: normal | | ? | justify-content: normal | | ? [ | links | Rechts ] // = Leerzeichen zwischen | Raum-um | raumgleichmäßig | dehnen // = unsicher | sicher // Zentrum | Start | Ende | Flex-Start | Flex-Ende // = [ zuerst | zuletzt ]? Grundlinie // Was ist in oder davor? - darf nicht angegeben werden

• links- für justify-content , funktioniert nicht für align-content . Die Säulen werden dicht aneinander bis zum linken Rand des Behälters gepackt.

Rechts- für justify-content , funktioniert nicht für align-content . Die Säulen werden dicht aneinander bis zum rechten Rand des Behälters gepackt.

Flex-Start

Flex-Ende

• Grundlinie, erste Grundlinie, letzte Grundlinie

Alle möglichen Werte:

// Grundausrichtung align-content: center; align-content: start; align-content: end; align-content: flex-start; align-content: flex-end; align-content: normal; // Ausrichtung entlang der Textzeile align-content: baseline; align-content: erste Grundlinie; align-content: letzte Grundlinie; // Verteilung align-content: space-between; align-content: space-around; align-content: space-evenly; align-content: stretch; // wenn das Element den Container überlappt align-content: Safe Center; align-content: unsicheres Zentrum; // global align-content: inherit; align-content: initial; align-content: unset;

rechtfertigen-Inhalt:

// Grundausrichtung justify-content: center; justify-content: start; rechtfertigen-Inhalt: Ende; rechtfertigen-Inhalt: Flex-Start; rechtfertigen-Inhalt: Flex-Ende; justify-content: left; rechtfertigen-Inhalt: richtig; align-content: normal; // Ausrichtung entlang der Textzeile macht keinen Sinn // Verteilung justify-content: space-between; justify-content: space-around; justify-content: space-evenly; justify-content: stretch; // wenn das Element den Container überlappt justify-content: Safe Center; rechtfertigen-Inhalt: Unsicheres Zentrum; // global justify-content: inherit; justify-content: initial; justify-content: unset;

// Grundausrichtung // align-content kann nicht links oder rechts sein place-content: center start; Ortsinhalt: Startzentrum; Ortsinhalt: Ende links; Ortsinhalt: Flex-Start-Center; Ortsinhalt: Flex-End-Center; // Ausrichtung entlang der Textzeile // für den zweiten Parameter (justify-content) macht keinen Sinn place-content: baseline center; Platzinhalt: erste Grundlinie raumgleichmäßig; Ortsinhalt: letzte Grundlinie rechts; // Verteilung place-content: space-between space-evenly; Ortsinhalt: Raum-um-Raum-gleichmäßig; Ortsinhalt: raumgleichmäßig strecken; Platzinhalt: Raum gleichmäßig ausdehnen; // global place-content: inherit; Ortsinhalt: initial; Ortsinhalt: nicht gesetzt;

align-items: justify-items: place-items:

Richtet Rasterelemente aus – was sich innerhalb der Rasterzellen befindet. Feuer für alle Rasterelemente. Um die Zellen selbst (Spaltenzeilen) auszurichten, verwenden Sie: justify-content , align-content , place-content .

// Syntax: align-items: value; // richtet Elemente vertikal aus ↓ justify-items: value; // richtet Elemente horizontal aus ←→ place-items: value; // Abkürzung: wird beide Werte setzen place-items: align-items justify-items; // Kurzschrift

Der Wert könnte sein:

automatisch (Standard)– Gibt an, dass der justify-items:-Wert verwendet werden soll, der für den Container festgelegt ist. Wenn das Element mit absolute positioniert wird, wird normal angewendet.

• strecken- streckt alle Elemente auf die gesamte Breite/Höhe der Zellen.
• Start- platziert alle Elemente am Anfang der Zellen (links oder oben).
• Ende- platziert alle Elemente am Ende der Zellen (rechts oder unten).
• Center- Platziert alle Elemente in der Mitte der Zellen.

Seltene Werte:

Beispiele:

Vollständige Syntax:

Der Einfachheit halber handelt es sich hier nicht um die vollständige Syntax, sie deckt jedoch 99 % des Bedarfs ab.

// Syntax: align-items: normal | dehnen | [ ? ] | justify-items: normal | dehnen | ? [ | links | rechts ] | | Vermächtnis [ links | richtig | Center ] // = [ zuerst | zuletzt ]? Grundlinie // = unsicher | sicher // Zentrum | Start | Ende | Selbststart | Selbstzweck | Flex-Start | Flex-End // Was ist drin oder davor? - darf nicht angegeben werden

• links- für justify-items, funktioniert nicht für align-items. Alle Elemente werden gegen den linken Rand der Zellen gedrückt.

Rechts- für justify-items, funktioniert nicht für align-items. Alle Elemente werden an den rechten Rand der Zellen gedrückt.

Flex-Start- das Gleiche wie Start für ein Raster. Diese. Wenn die Elemente keine untergeordneten Elemente des Flex-Containers sind, verhält er sich wie start .

Flex-Ende- das Gleiche wie end für ein Gitter. Diese. Wenn die Elemente keine untergeordneten Elemente des Flex-Containers sind, verhält er sich wie end .

Grundlinie, erste Grundlinie, letzte Grundlinie- Ausrichtung entlang der Textzeile (erste oder letzte). Abwärtskompatibilität: Für die erste Baseline ist dies start , für die letzte Baseline ist dies end .

• Vermächtnis– ermöglicht Ihnen zu steuern, wie der Wert an Kinder vererbt wird.
  Wenn Legacy ohne left , right , center angegeben wird, wird der Wert einfach vom übergeordneten Element geerbt oder entspricht normal .
  Wenn sich justify-self:auto auf den Wert von justify-items: bezieht, wird der Wert ohne das Wort „Legacy“ verwendet, beispielsweise „legacy left“ würde „left“ lauten. Dies ist für die ordnungsgemäße Tag-Ausrichtung erforderlich oder ein Element mit einem align-Attribut.

Alle möglichen Werte:

// Basiswerte align-items: normal; align-items: stretch; // Positionsausrichtung // align-items können nicht links oder rechts sein align-items: center; align-items: start; align-items: end; align-items: Flex-Start; align-items: flex-end; align-items: Selbststart; align-items: self-end; // Ausrichtung entlang der Textzeile align-items: baseline; align-items: erste Grundlinie; align-items: letzte Grundlinie; // wenn ein Element einen Container überlappt align-items: Safe Center; align-items: unsicheres Zentrum; // Globally align-items: inherit; align-items: initial; align-items: nicht gesetzt;

// Basiswerte justify-items: auto; justify-items: normal; justify-items: stretch; // Positionsausrichtung justify-items: center; justify-items: start; justify-items: end; justify-items: Flex-Start; justify-items: flex-end; justify-items: Selbststart; justify-items: self-end; justify-items: left; justify-items: richtig; // An der Textzeile ausrichten justify-items: baseline; justify-items: erste Grundlinie; justify-items: letzte Grundlinie; // wenn das Element den Container überlappt justify-items: Safe Center; justify-items: unsicheres Zentrum; // Ausrichtung an der Priorität des Kreditwerts vom übergeordneten Element justify-items: Legacy Right; justify-items: Legacy übrig; justify-items: Legacy Center; // global justify-items: inherit; justify-items: initial; justify-items: nicht gesetzt;

// Grundwerte place-items: auto center; Ortsgegenstände: normaler Start; // Positionsausrichtung Place-Items: Center Normal; Ortselemente: automatisch starten; Ortselemente: Ende normal; Place-Items: Selbststart-Auto; Ortselemente: Selbstende normal; Ortselemente: Flex-Start-Auto; Ortselemente: Flex-Ende normal; Ortselemente: links auto; Ortsgegenstände: rechts normal; // Ausrichtung entlang der Textzeile place-items: baseline normal; Ortselemente: erste Basislinie automatisch; Ortselemente: letzte Grundlinie normal; Ortselemente: automatisch strecken; // Global platzieren-Elemente: inherit; Ortsgegenstände: initial; Ortselemente: nicht gesetzt;

Grid-Auto-Zeilen: Grid-Auto-Spalten:

Legt die Größe für automatisch erstellte (implizite) Zeilen/Spalten fest.

Spalten/Zeilen werden automatisch erstellt, wenn ein Raster mehr Elemente enthält, als in die angegebenen Zeilen/Spalten (Zellen) passen, oder wenn ein Element außerhalb des angegebenen Rasters platziert wird.

// Syntax: Grid-Auto-Spalten: Größe; Grid-Auto-Zeilen: Größe;

Mögliche Größenwerte finden Sie in der Beschreibung und - möglicherweise px, em, %, fr usw.

Beispiele:

Um zu verstehen, wie Zellen mit automatischem Raster erstellt werden, stellen wir uns vor, dass wir ein 2x2-Raster haben – 2 Zeilen und 2 Spalten:

Rastervorlagenspalten: 60px 60px; Rastervorlagenzeilen: 90px 90px

Versuchen wir nun, Elemente im Raster zu platzieren, indem wir ihre Positionen über Eigenschaften angeben:

Item-a ( Rasterspalte: 1; Rasterzeile: 2; ) .item-b ( Rasterspalte: 5; Rasterzeile: 2; )

Wir haben darum gebeten, element.item-b in einer nicht existierenden Spalte 5 zu platzieren. Wir haben nur 2 Spalten, sodass das Raster automatisch erweitert wird und 3 weitere Spalten mit automatischer Breite hinzugefügt werden. Mit den aktuellen Eigenschaften können wir Größen für diese impliziten Spalten festlegen:

Grid-Auto-Spalten: 60px;

Interessanter Punkt zu impliziten Zeilenspalten und repeat() :

Grid-Auto-Flow:

Ermöglicht Ihnen, die Logik zum Platzieren von Elementen in leeren Zellen zu ändern. Standardmäßig ist der Algorithmus → ↓ → Sie können es so machen ↓ → ↓ .

Wenn für Elemente nicht ausdrücklich angegeben ist, in welcher Zelle (Bereich) sie sich befinden sollen, werden sie in leere Zellen platziert. Standardmäßig erfolgt die Füllung von links nach rechts (→) bis zum Ende der Zeile, dann wird zur nächsten Zeile übergegangen und erneut gefüllt (ähnlich wie wir Text lesen).

// Syntax: Grid-Auto-Flow: Zeile | Spalte | Reihe dicht | Säule dicht

Zeile (Standard)- ordnet Elemente im Raster in Reihen → ↓ → an. Fügt Zeilen hinzu, wenn im Raster kein Platz vorhanden ist.

Spalte- ordnet Elemente im Raster in Spalten ↓ → ↓ an. Fügt Spalten hinzu, wenn im Raster kein Platz vorhanden ist.

• dicht- Aktiviert den „dichten“ Füllalgorithmus, der versucht, Elemente so zu platzieren, dass keine Leerräume mehr übrig bleiben (der „sparse“-Algorithmus funktioniert standardmäßig). In diesem Fall sind die Elemente möglicherweise nicht in der richtigen Reihenfolge angeordnet. Beim Einfügen jeweils nächstes Element, prüft der Algorithmus, ob sich dahinter eine leere Zelle befindet, in die das aktuelle Element passen kann; wenn ja, platziert er es dort und nicht in der nächsten Zelle. Dies ist nur dann sinnvoll, wenn es Bereiche im Raster gibt. Wenn einem Element dann mitgeteilt wird, dass es in mehrere Zellen gleichzeitig passen soll (über eine dichte Spanne), passt es normalerweise nicht in eine Zelle und es bleibt leerer Raum übrig.

Beispiele:

Nehmen wir an, wir haben diesen HTML-Code:

Jetzt haben wir ein Raster mit 5 Spalten und zwei Zeilen erstellt und zwei Elemente in bestimmten Zellen platziert:

Raster (Anzeige: Raster; Rastervorlage: 60 Pixel 60 Pixel 60 Pixel 60 Pixel 60 Pixel / 30 Pixel 30 Pixel; /* Standard: Raster-Auto-Flow: Zeile; */)

Jetzt installieren wir die Spalte „grid-auto-flow:“:

Netz:

Ermöglicht das kurze Schreiben von Eigenschaften:

• Rastervorlagenzeilen:
• Rastervorlagenspalten:
• Rastervorlagenbereiche:
• Grid-Auto-Zeilen:
• Grid-Auto-Spalten:
• Grid-Auto-Flow:

Diese. Diese Eigenschaft kann fast alle Eigenschaften eines Gitters beschreiben. Allerdings ist es hier möglich, Eigenschaften nur für „explizite“ oder „implizite“ Zeilen/Spalten zu beschreiben; es funktioniert nicht für beide gleichzeitig. Wenn Sie für beide Eigenschaften angeben müssen, müssen Sie zusätzlich zu „grid:“ die entsprechenden Eigenschaften hinzufügen.

// Syntax: Grid: keine Grid: Grid-Template Grid: Grid-Template-Zeilen / Grid-Template-Spalten Grid: Grid-Template-Bereiche Grid: Grid-Template-Zeilen / Grid-Auto-Spalten? Raster: Raster-Auto-Zeilen? /grid-template-columns // was ist drin oder davor? - darf nicht angegeben werden

keiner- setzt alle Eigenschaften auf den Ausgangszustand.

Grid-Template-Zeilen / Grid-Auto-Spalten? - Stichwort auto-flow auf der rechten Seite des Schrägstrichs legt „grid-auto-flow: Column“ fest. Dense aktiviert den „dichten“ Packalgorithmus. Wenn „grid-auto-columns“ nicht angegeben ist, ist es auto .

• Grid-Auto-Zeilen? /grid-template-columns– Das Schlüsselwort „auto-flow“ auf der linken Seite des Schrägstrichs legt „grid-auto-flow: row“ fest. Dense aktiviert den „dichten“ Packalgorithmus. Wenn „grid-auto-rows“ nicht angegeben ist, wird „auto“ verwendet.

Beispiele:

Raster: „Kopfzeile Kopfzeile Kopfzeile Kopfzeile“ „Haupthaupthaupthaupthaupt rechts“ „Fußzeile Fußzeile Fußzeile Fußzeile“; // dasselbe wie: grid-template-areas: „header header header header“ „main main main right right“ „footer footer footer footer“; Raster: 100px 300px / 3fr 1fr; // dasselbe wie: grid-auto-flow: row; Rastervorlagenspalten: 200px 1fr; Raster: Auto-Flow dicht 100px / 1fr 2fr; // dasselbe wie: Grid-Auto-Flow: Row Dense; Raster-Auto-Zeilen: 100 Pixel; Rastervorlagenspalten: 1fr 2fr; Raster: 100px 300px / Auto-Flow 200px; // das Gleiche: Grid-Template-rows: 100px 300px; Grid-Auto-Flow: Spalte; Raster-Auto-Spalten: 200px;

Sie können auch eine komplexere, aber bequemere Konfiguration angeben, um alles auf einmal zu konfigurieren:

Raster: „Kopfzeile Kopfzeile“ 1fr „Fußzeile Fußzeile Fußzeile“ 25 Pixel / automatisch 50 Pixel automatisch; // dasselbe wie: Grid-Template-Areas: „Header Header Header“ „Fußzeile Fußzeile Fußzeile“; Rastervorlagenzeilen: 1fr 25px; Rastervorlagenspalten: auto 50px auto;

Und weitere Optionen:

Raster: wiederholen (automatisches Ausfüllen, 5em) / automatischer Fluss 1fr; Raster: Auto-Flow 1fr / Wiederholung (Auto-Fill, 5em); Raster: Auto 1fr Auto / Wiederholung (5, 1fr); Raster: wiederholen (3, automatisch) / wiederholen (4, automatisch);

Für Elemente

Die CSS-Eigenschaften float , display:inline-block , display:table-cell , Vertical-align und Column-* haben keine Auswirkung auf die Rasterelemente des Containers. Grid hat seine eigenen Regeln...

Rasterzeilenanfang: Rasterzeilenende: Rasterspaltenanfang: Rasterspaltenende: Rasterzeile: Rasterspalte:

Gibt die Position eines Elements im Raster an. Diese. Platziert ein Element in der angegebenen Zelle. Sie müssen den Namen oder die Zeilennummer angeben, zu der die Zelle gehört und an die Sie das Element anhängen möchten.

„grid-column“ und „grid-row“ sind Abkürzungen für die Eigenschaften: „grid-column-start/grid-column-end“ und „grid-row-start“ / „grid-row-end“. Sie können nur den ersten (einen) Wert angeben, dieser bezieht sich auf die Startlinie und das Element wird um 1 Zeile/Spalte gestreckt (d. h. es wird in einer Zelle platziert, in der die Startlinie angegeben ist).

// Syntax: Grid-Row-Start: Wert; // wo die Zeilenzeile beginnt grid-row-end: value; // wo die Zeilenlinie endet grid-column-start: value; // wo die Spaltenzeile beginnt grid-column-end: value; // wo die Spaltenzeile endet Grid-Zeile: Grid-Row-Start / Grid-Row-End; Rasterspalte: Rasterspaltenanfang / Rasterspaltenende; // Sie können einen Wert angeben, der zweite Wert ist span 1 Grid-Row: Grid-Row-Start; Rasterspalte: Rasterspaltenstart;

Der Wert könnte sein:

Beispiele:

.item-a ( Rasterspaltenanfang: 2; Rasterspaltenende: fünf; Rasterzeilenanfang: Zeilen1-Start Rasterzeilenende: 3)
.item-b ( Grid-Spaltenanfang: 1; Grid-Spaltenende: Span Col4-Start; Grid-Zeilenanfang: 2 Grid-Zeilenende: Span 2 )

Wenn die Eigenschaften „grid-column-end/grid-row-end“ nicht festgelegt sind, wird das Element standardmäßig auf 1 Zeile/Spalte gestreckt. align-self: justify-self: place-self:

Richtet das aktuelle Element innerhalb einer Zelle aus. Gilt für ein einzelnes Containerelement.

// Syntax: align-self: value; // richtet das Element vertikal innerhalb der Zelle aus ↓ justify-self: value; // richtet das Element horizontal innerhalb der Zelle aus ←→ place-self: value; // Abkürzung: wird beide Werte setzen place-self: align-self justify-self; // Kurzschrift

Der Wert könnte sein:

• dehnen (Standard)– streckt das aktuelle Element auf die gesamte Breite/Höhe der Zelle.
• Start- Platziert das aktuelle Element am Anfang der Zelle (links oder oben).
• Ende- Platziert das aktuelle Element am Ende der Zelle (rechts oder unten).
• Center– Platziert das aktuelle Element in der Mitte der Zelle.

Seltene Werte:

sicherer Wert- Wenn die Breite oder Höhe des Elements die Zellengröße überschreitet, wechselt der Wert auf Start. Die Bedeutung kann hier nur lauten: Mitte oder Ende.

# Framework für eine Spieleanwendung

#grid ( /** * Zwei Spalten: * 1. passt sich dem Inhalt an, * 2. erhält alle verbleibenden Leerzeichen * (kann jedoch nicht kleiner als die Mindestgröße des darin enthaltenen Inhalts oder des Steuerelementblocks in derselben Spalte sein) * * Drei Zeilen: * 1. passt sich dem Inhalt an * 2. erhält den gesamten freien Speicherplatz * (kann jedoch nicht kleiner als die Mindestgröße eines der Blöcke in dieser Zeile sein) * 3. passt sich dem Inhalt an */ Anzeige: Raster ; Rastervorlagenspalten: /* 1 */ auto /* 2 */ 1fr; Rastervorlagenzeilen: /* 1 */ auto /* 2 */ 1fr /* 3 */ auto; /* Voll strecken height */ height: 100vh; ) / * gibt die Positionen von Blöcken im Raster anhand von Koordinaten an */ #title ( Grid-column: 1; Grid-row: 1; ) #score ( Grid-column: 1; Grid-row : 3; ) #stats ( Rasterspalte: 1; Rasterzeile: 2; ) #board ( Rasterspalte: 2; Rasterzeile: 1 / Spanne 2; ) #controls ( Rasterspalte: 2; Rasterzeile Zeile: 3; justify-self: center; )
Spieltitel
Punktzahl
Statistiken
Planke
Kontrollen

Machen wir die Aufgabe komplizierter.

Jetzt müssen wir sicherstellen, dass sich der Rahmen ändert, wenn das Mobilgerät gedreht wird und so aussieht:



In diesem Fall ist es bequemer, Rasterbereiche des Rasters zu verwenden.

/* Hochformat */ @media (Ausrichtung: Hochformat) ( #grid ( display: Grid; /* Erstelle eine Rasterstruktur und gib die Namen der Bereiche an. * Diese Struktur funktioniert standardmäßig und ist für die Querformatausrichtung geeignet. * / Grid-Template-Areas: „title stats“ „score stats“ „board board“ „ctrls ctrls“; /* Geben Sie die Größen für Zeilen und Spalten an. */ Grid-Template-Columns: Auto 1fr; Grid-Template-Rows : auto auto 1fr auto; height: 100vh; ) ) /* Querformat */ @media (Ausrichtung: Querformat) ( #grid ( display: grid; /* eine Rasterstruktur erstellen und die Namen der Bereiche angeben, * Diese Struktur funktioniert standardmäßig und ist für die Ausrichtung im Querformat geeignet. */ Grid-Template-Areas: „Titelbrett“ „Statistikbrett“ „Score-Strgs“; /* Geben Sie die Größen für Zeilen und Spalten an. */ Grid-Template-Spalten: auto 1fr; Grid-template-rows: auto 1fr auto ; height: 100vh; ) ) /* Elemente in benannten Rasterbereichen platzieren */ #title ( Grid-Area: Title; ) #score ( Grid-Area: Score; ) # Statistiken ( Grid-Bereich: Statistiken; ) #board ( Grid-Area: Board; ) #controls ( Grid-Area: Strgs; Justify-Self: Center; )

Spieltitel
Punktzahl
Statistiken
Planke
Kontrollen

Browserunterstützung

Grid wird von 92 % der Browser unterstützt.

Nachfolgend finden Sie die Grid-Unterstützung durch Browser gemäß CanIuse. Die Zahl gibt an, dass der Browser die Funktion in dieser Version und höher unterstützt.

Desktop

Chrom	Oper	Feuerfuchs	I.E.	Rand	Safari
57	44	52	11*	16	10.1

Mobil/Tablet

iOS-Safari	Opera Mobile	Opera Mini	Android	Android Chrome	Android Firefox
10.3	-	-	62	66	57

Um in CSS zu prüfen, ob der aktuelle Browser Grid unterstützt, können Sie @supports verwenden (funktioniert nicht im IE):

@supports(display: Grid) ( /* Grid wird vom Browser unterstützt */ div ( Display: Grid; ) ) @supports not(display: Grid) ( /* Grid wird vom Browser NICHT unterstützt */ div ( Display: biegen; ) )