So verwenden Sie Grid-Template-Areas in CSS

Mit der Grid-Template-Eigenschaft können Entwickler intuitive, lesbare Layouts erstellen, indem benannte Gitterbereiche definiert werden. Jede Zeichenfolge repräsentiert eine Zeile und jedes Wort eine Spaltenzelle mit Namen der Gitterfläche auf untergeordneten Elementen, die denjenigen in der Vorlage entsprechen, wie z. B. "Header Header Header" für einen Header mit voller Breite, während Punkte leere Zellen bezeichnen, müssen Namen genau übereinstimmen, Bereiche müssen einzelne Geräte bilden, und reaktionsschnelle Designs können das Layout über Medienanfragen, die es ideal für komplexe, für komplexe Laids rekonfigurieren können, lasieren, ein ideal für komplexe LAGOUTEN, die es für komplexe Laides und Wartung für komplexe Laides und Wartungsauflösungen rekonfigurieren können.

Die Eigenschaft in grid-template-areas in CSS ist eine leistungsstarke und intuitive Möglichkeit, die Layoutstruktur eines Gitterbehälters mit den benannten Bereichen zu definieren. Es erleichtert es, komplexe Layouts zu visualisieren und zu verwalten, indem Sie verschiedenen Abschnitten Ihres Netzes menschlich-lesbare Namen zuweisen.

Hier erfahren Sie, wie Sie grid-template-areas effektiv verwenden:

Definieren Sie benannte Bereiche im Rasterbehälter

Weisen Sie zunächst die Netzelemente mithilfe der Eigenschaft grid-area Namen zu und zeichnen Sie das Layout im übergeordneten Container mit grid-template-areas ab. Jede Zeichenfolge in der Eigenschaft repräsentiert eine Zeile, und jedes Wort repräsentiert eine Spaltenzelle.

 .Container {
  Anzeige: Grid;
  Grid-Template-Areas:
    "Header Header Header"
    "Sidebar Main Haupt"
    "Fußzeile Fußzeile";
  Raster-Template-Reihen: 60px 1fr 40px;
  Grid-Template-Säulen: 200px 1fr 1fr;
}

In diesem Beispiel:

• Der header umfasst drei Säulen.
• Die sidebar nimmt die erste Spalte der zweiten Reihe.
• Der main dauert die zweite und dritte Spalten der zweiten Reihe.
• Die footer umfasst alle drei Spalten in der letzten Reihe.

Weisen Sie den Bereichen Netzelemente zu

Jedes direkte untergeordnete Element, das am Layout teilnehmen sollte, benötigt einen grid-area der einem der in grid-template-areas verwendeten Namen entspricht.

 .Header {Grid-Area: Header; }
SideBar {Grid-Area: Sidebar; }
.Main {Grid-Area: Main; }
. }

Und die entsprechende HTML:

 <div class = "container">
  <div class = "Header"> Header </div>
  <div class = "Sidebar"> Seitenleiste </div>
  <div class = "main"> Hauptinhalt </div>
  <div class = "footer"> footes </div>
</div>

Schlüsselregeln und Tipps

• Verwenden Sie Punkte für leere Zellen : Wenn Sie einen leeren Raum in Ihrem Layout wünschen, verwenden Sie einen Zeitraum ( . ).

   Grid-Template-Areas:
    "Header Header"
    ". hauptsächlich"
    "Fußzeile Fußzeile";

• Die Namen müssen genau übereinstimmen : Der Name in grid-area muss genau mit dem Namen in grid-template-areas , einschließlich Fall und Rechtschreibung, übereinstimmen.

• Jeder Bereich muss ein einzelnes Rechteck sein : Sie können keinen benannten Bereich in zwei separate Teile aufgeteilt haben. Sie können beispielsweise keine sidebar haben, die sowohl in der ersten als auch in der dritten Reihe erscheint, es sei denn, sie ist ununterbrochen.

• Whitespace spielt keine Rolle : Sie können die Saiten zur Lesbarkeit formatieren.

   Grid-Template-Areas:
    "Header Header Header"
    "Sidebar Main Haupt"
    "Fußzeile Fußzeile";

• Zeilen und Spalten werden abgeleitet : Die Anzahl der Zeichenfolgen definiert die Anzahl der Zeilen. Die Anzahl der Wörter in jeder Zeichenfolge (durch Leerzeichen getrennt) definiert die Anzahl der Spalten.

Responsive Layouts mit Raster-Template-Areas

Sie können das Layout an verschiedenen Haltepunkten neu definieren, indem Sie in Medienabfragen grid-template-areas ändern.

 @media (max-Width: 600px) {
  .Container {
    Grid-Template-Areas:
      "Kopfball"
      "hauptsächlich"
      "Seitenleiste"
      "Fußzeile";
    Grid-Template-Säulen: 1fr;
  }
}

Dies stapelt das Layout vertikal auf kleinen Bildschirmen und verbessert die mobile Benutzerfreundlichkeit.

Im Grunde genommen gibt Ihnen grid-template-areas eine visuelle Blaupause Ihres Layouts direkt im CSS. Es ist besonders hilfreich für komplexe Designs und Teamzusammenarbeit, da die Struktur leicht zu lesen und zu ändern ist. Denken Sie daran, Ihre Artikel konsequent zu benennen und die Gitterstruktur rechteckig zu halten.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Grid-Template-Areas in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!