Was ist CSS Grid Layout?

CSS Grid ist ein zweidimensionales Web-Layout-Tool, mit dem Entwickler die Position und Größe von Seitenelementen durch Definieren von Zeilen und Spalten genau steuern können. Im Gegensatz zu Flexbox kann es gleichzeitig Zeilen und Spalten verarbeiten, die zum Aufbau komplexer Strukturen geeignet sind. Um das Raster zu verwenden, müssen Sie den Container zum Zeigen einstellen: Grid zuerst und die Zeile und die Spaltengrößen durch 1. Grid-Template-Säulen und 2. Raster-Template-Reihen, 3. LAP SET-Abstand und 4. Zu den typischen Anwendungsszenarien gehören Responsive Layout, Dashboard -Schnittstelle und Bildergalerie. Zu den praktischen Tipps gehören: 5. Verwenden Sie Grid-Säule/Gitterreihe, um die Projektspanne zu steuern. Das Mastering -Netz kann die Layout -Effizienz und -flexibilität erheblich verbessern und eignen sich für moderne Webentwicklungsbedürfnisse.

Das CSS-Grid-Layout ist ein leistungsstarkes Tool für das Webseiten-Layout, mit dem Entwickler Elemente in Seiten über ein zweidimensionales Netzsystem organisieren können. Im Vergleich zu herkömmlichen Layoutmethoden wie Floating oder Flexbox ist das Netzlayout flexibler und intuitiver, insbesondere für den Aufbau komplexer Webstrukturen.

Was ist ein CSS -Netz?

Einfach ausgedrückt ist CSS Grid eine Layoutmethode, die Webseiten in Zeilen und Spalten unterteilt und so ein "Gitter" bildet. Sie können jedes Element genau in dieses Netz einfügen und ihre Position, Größe und Anordnung kontrollieren. Anstatt sich nur auf eindimensionale Anordnungen (entweder horizontal oder vertikal) wie Flexbox zu konzentrieren, kann es gleichzeitig Zeilen und Spalten verarbeiten.

Zum Beispiel: Wenn Sie eine Seite mit einem Titel, einer Seitenleiste, einem Hauptinhaltsbereich und einer Fußzeile entwerfen, kann die Verwendung von Grid den Standort dieser Bereiche leicht definieren und die relative Beziehung zwischen ihnen aufrechterhalten.

Wie fange ich mit Gitterlayout an?

Um das Raster zu verwenden, müssen Sie zunächst display: grid in einem Behälter festlegen, und der Behälter wird zu einem "Gitterbehälter", und seine untergeordneten Elemente sind "Gitterartikel".

 .Container {
  Anzeige: Gitter;
}

Als nächstes können Sie definieren, wie viele Spalten, Zeilen dieses Netzes und die Größe jedes Bereichs:

• Verwenden Sie grid-template-columns und grid-template-rows um Zeilensäulen zu definieren.
• Verwenden Sie grid-gap , um den Abstand zwischen den Projekten festzulegen ( gap -Abkürzung wird jetzt empfohlen).
• Verwenden Sie grid-template-areas um den Bereich zu benennen, um das Layout klarer zu machen.

Zum Beispiel:

 .Container {
  Anzeige: Gitter;
  Grid-Template-Säulen: 200px 1fr 1fr;
  Grid-Template-Reihen: Auto 1FR Auto;
  Lücke: 10px;
}

Dieser Code erstellt ein Drei-Spal-Layout und zwei Reihen, wobei die beiden mittleren Spalten jeweils die Hälfte des verbleibenden Raums belegen, und die Zeilenhöhe wird automatisch entsprechend dem Inhalt eingestellt.

Praktische Anwendungsszenarien des Gitterlayouts

Das Grid eignet sich am besten zum Entwerfen der Gesamtseitenstruktur, wie z. B.:

• Responsive Website -Layout : Sie können repeat() und minmax() -Funktionen verwenden, um adaptives Layout zusammen mit Medienfragen zu erreichen.
• Dashboard -Schnittstelle : Mehrere Funktionsmodule sind in Zeilen und Spalten ordentlich angeordnet, und die Bestellung ist ebenfalls bequem.
• Bildergalerie : Ordnen Sie automatisch Bildblöcke an und unterstützen Sie verschiedene Proportionen und Spans.

Eine übliche Praxis besteht darin, verschiedene Blöcke in Kombination mit grid-template-areas zu benennen, damit die Logik klar und leicht zu pflegen ist:

 .Container {
  Anzeige: Gitter;
  Grid-Template-Areas:
    "Header Header"
    "Seitenleiste Haupt"
    "Fußzeile Fußzeile";
}

Fügen Sie dann den Klassennamen dem entsprechenden Block in HTML hinzu.

Einige praktische Tipps für das Netz

• Steuern Sie die Zeitspanne eines Elements : Sie können grid-column oder grid-row verwenden, um eine Elementspanne mehrere Spalten oder Zeilen zu erstellen.
• Ordnen Sie automatisch Elemente an : Verwenden Sie grid-auto-flow um zu steuern, ob neu hinzugefügte Elemente automatisch nach Zeile oder Spalte gefüllt werden.
• Responsive Design-Tipps : Verwenden Sie auto-fit und minmax() mit repeat() um schnell elastische Layouts zu erstellen.

Zum Beispiel:

 .Netz {
  Anzeige: Gitter;
  Grid-Template-Säulen: Wiederholung (Auto-Fit, Minmax (200px, 1fr));
}

Dieses Schreiben ermöglicht es dem Projekt, die Linien automatisch an verschiedenen Bildschirmbreiten zu wickeln und die minimale Breite von 200px zu behalten.

Insgesamt bietet CSS Grid eine modernere und flexiblere Möglichkeit, Weblayouts zu erstellen. Während es zu Beginn etwas kompliziert sein kann, werden Sie es sehr leistungsfähig und effizient finden. Grundsätzlich ist das alles. Hab keine Angst vor den Begriffen. Sie können beginnen, indem Sie nur ein paar Beispiele ausprobieren.

Das obige ist der detaillierte Inhalt vonWas ist CSS Grid Layout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!