CSS-responsives Rasterlayout. Rasterpraxis_Rekonstruktion unter Verwendung von Rastervorlagenbereichen

Der Hauptgrund dafür, dass „grid-template-areas“ ungültig ist, liegt darin, dass der übergeordnete Container display:grid nicht festlegt oder das untergeordnete Element nicht „grid-area“ heißt; Beide müssen gleichzeitig erfüllt sein, und der Bereichsname muss genau übereinstimmen, das richtige Format haben (einschließlich Anführungszeichen) und darf nicht mit Schlüsselwörtern und Zahlen beginnen.

Warum können Rastervorlagenbereiche den Effekt nicht schreiben?

Ein häufiges Fehlerphänomen besteht darin, dass grid-template-areas geschrieben wird, das Layout sich jedoch überhaupt nicht ändert, oder dass der Browser den Fehler Invalid property value meldet. Es gibt nur zwei grundlegende Gründe: Der übergeordnete Container legt display: grid nicht fest, oder die untergeordneten Elemente werden nicht explizit mit grid-area benannt.

• Der übergeordnete Container muss display: grid deklarieren. Der Rastermodus wird nicht automatisch allein durch grid-template-areas ausgelöst.
• Jedes untergeordnete Element, das an der Bereichszuordnung teilnehmen möchte, muss grid-area festlegen und der Wert muss genau mit der Zeichenfolge in grid-template-areas übereinstimmen (einschließlich Anführungszeichen, Leerzeichen und Zeilenumbrüche).
• Der Bereichsname darf nicht mit einer Zahl beginnen oder ein CSS-Schlüsselwort sein (z. B. auto , none ). Es wird empfohlen, alle Kleinbuchstaben mit Bindestrichen zu verwenden, z. B. für header und main-content

Zitate werden in Beispielen leicht übersehen:

 Rastervorlagenbereiche:
  „Kopfzeile“
  „Hauptnavigation“
  „Fußzeile Fußzeile“;

Wie passt man Rastervorlagenbereiche an verschiedene Bildschirme an?

Die Reaktionsfähigkeit basiert nicht auf Medienabfragen, um „alle Bereiche neu zu schreiben“, sondern verwendet Medienabfragen, um „Bereichsvorlagen zu wechseln“. Dies ist die sauberste Möglichkeit, grid-template-areas -Wert über verschiedene Haltepunkte für dieselbe DOM-Struktur zu ändern.

• Mobil zuerst: Schreiben Sie zuerst schmale Bildschirmvorlagen, z. B. "header" "nav" "main" "footer"
• Tablet/Desktop plus Medienabfrage, die ein mehrspaltiges Layout abdeckt: "header header" "nav main" "footer footer"
• Hinweis: Die Anzahl der regionalen Zeichenfolgenzeilen unter jedem Haltepunkt muss konsistent sein (d. h. die Anzahl der Spalten in Anführungszeichen in jeder Zeile ist gleich), andernfalls schlägt die Analyse fehl.
• Versuchen Sie nicht grid-template-areas und grid-template in derselben Regel zu mischen, da sie sich gegenseitig ausschließen und Letzteres Vorrang vor Ersterem hat.

Es gibt keinen zusätzlichen Leistungsaufwand – nur das Umschalten des CSS-Eigenschaftswerts, es wird kein Reflow ausgelöst. Bitte beachten Sie jedoch, dass alte Safari-Versionen (<14.5) gelegentlich Fehler beim Parsen mehrzeiliger Zeichenfolgen aufweisen. Es wird empfohlen, einzeiliges Schreiben und Escape mit Zeilenumbrüchen zu verwenden ( "header header" "nav main" ist stabiler).

Was soll ich tun, wenn der Name des Rasterbereichs in Konflikt steht oder leer bleibt?

Doppelte Bereichsnamen führen dazu, dass einige Elemente ignoriert werden; Das Leerlassen (mit . oder fortlaufendem . ) ist eine legale und gängige Methode, aber man kann leicht fälschlicherweise annehmen, dass „nicht geschrieben“ „keinen Platz belegen“ bedeutet.

• Wenn in denselben grid-template-areas derselbe Name mehrmals vorkommt, wird nur das erste übereinstimmende Element übernommen und die anderen grid-area -Elemente mit demselben Namen werden aus dem Grid-Fluss verdrängt (werden zu gewöhnlichen Elementen auf Blockebene).
• . stellt eine leere Zelle dar, fügt keinen Inhalt ein und nimmt keine logische Position ein; .. hat den gleichen Effekt wie . , mehrere Punkte entsprechen einem
• Wenn in einem bestimmten Bereich kein Inhalt vorhanden ist, lassen Sie keine leere Zeichenfolge ( "" ), da sonst die Analyse fehlschlägt. Sie müssen verwenden .
• Wenn in dynamischen Rendering-Szenarien (z. B. Vue/React) grid-area aufgrund des komponentenbedingten Renderings fehlt, wird der entsprechende Bereich ausgeblendet. Sie müssen sicherstellen, dass das Element vorhanden ist und über den richtigen grid-area verfügt, wenn der Server oder JS initialisiert wird.

Zum Beispiel:

 Rastervorlagenbereiche:
  „Kopfzeile“
  „Navigation.“
  „Fußzeile Fußzeile“;

Die mittlere Zelle ist leer, nav nimmt nur die linke Seite ein und die rechte Seite bleibt leer.

Was passiert, wenn es mit Flex oder Float gemischt wird?

Kann nicht gemischt werden. Sobald der übergeordnete Container auf display: grid eingestellt ist, werden seine direkten untergeordneten Elemente in das Grid-Format übernommen, float , vertical-align und display: inline-block werden alle ungültig. flex Elemente werden ebenfalls wie gewöhnliche Grid-Elemente behandelt und nicht mehr nach Flex-Regeln angeordnet.

• Wenn Sie feststellen, dass margin des untergeordneten Elements nicht wirksam wird, die vertikale Zentrierung des Textes fehlschlägt oder align-self nicht reagiert, prüfen Sie zunächst, ob die übergeordnete Ebene versehentlich das Raster ausgelöst hat.
• Debugging-Fähigkeiten: Wählen Sie den übergeordneten Container in DevTools aus und prüfen Sie, ob display im berechneten Bereich tatsächlich grid ist. Manchmal fügt das Framework (z. B. einige UI-Bibliotheken) globale Stile ein und ändert stillschweigend die Anzeige
• Möchten Sie Flex äußerlich anwenden? Platzieren Sie den Flex-Container dann nicht in der Unterelementebene, die direkt von grid-template-areas gesteuert wird – fügen Sie entweder eine Ebene zum Raster hinzu und platzieren Sie den Flex-Container darin; oder geben Sie grid-template-areas auf und verwenden Sie grid-template grid-column , um es manuell zu positionieren.

Das wirklich Schwierige ist, die Verschachtelungsebene zu beurteilen: CSS Grid ist nicht rekursiv, sondern nur direkte untergeordnete Elemente. Wenn Sie sehen, dass der Inhalt in einem bestimmten Bereich fehlerhaft ist, liegt höchstwahrscheinlich eine andere Ebene im Anzeigemodus vor, die nicht gut verarbeitet wurde.

Es ist vorbei, wenn die Dinge geklärt sind.

Das obige ist der detaillierte Inhalt vonCSS-responsives Rasterlayout. Rasterpraxis_Rekonstruktion unter Verwendung von Rastervorlagenbereichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!