Detaillierte Erklärung zur Verwendung von Rastereigenschaften in CSS

Detaillierte Erklärung zur Verwendung von Rastereigenschaften in CSS

Rasterlayout

Dem übergeordneten Element hinzugefügte Attribute

Raster-Vorlagen-Spalten/Raster-Vorlagen-Zeilen

  • Definiert die Breite und Höhe einer Zeile oder Spalte von Elementen
  • Wenn das übergeordnete Element in 9 gleiche Teile aufgeteilt ist, werden alle untergeordneten Elemente in 9 gleichen Teilen angezeigt, unabhängig davon, wie viele untergeordnete Elemente vorhanden sind.
  • grid-template-columns: 33 % 33 % 33 %; kann geschrieben werden als grid-template-columns:repeat(3, 33 %);
.container {
  Breite: 200px;
  Höhe: 200px;
  Anzeige: Raster;
  Hintergrundfarbe: Koralle;
  Rand: 10px;
}

.Container .Artikel {
  Rand: 1px durchgezogen #ccc;
  Hintergrundfarbe: Schokolade;
}
.container1 {
  Rastervorlagenspalten: 33 % 33 % 33 %;
  Rastervorlagenzeilen: 33 % 33 % 33 %;
}

Raster-Vorlagenbereiche

  • Die Rastervorlagenbereiche des übergeordneten Elements und der Rasterbereich des untergeordneten Elements definieren den Rasterbereich
  • Ein Punkt stellt eine leere Gitterzelle dar.
.container {
  Breite: 200px;
  Höhe: 200px;
  Anzeige: Raster;
  Hintergrundfarbe: Koralle;
  Rand: 10px;
}

.Container .Artikel {
  Rand: 1px durchgezogen #ccc;
  Hintergrundfarbe: Schokolade;
}
.container2 {
  Rastervorlagenspalten: 1fr 1fr 1fr 1fr;
  Raster-Vorlagenzeilen: 1fr 1fr 1fr;
  Rastervorlagenbereiche: „Kopfzeile, Kopfzeile, Fußzeile“
    "Haupt-Haupt-Seitenleiste"
    "Haupt-Haupt-Seitenleiste";
}

.container2 .item-1 {
  Rasterbereich: Kopfzeile;
}

.container2 .item-2 {
  Rasterbereich: Hauptbereich;
}

.container2 .item-3 {
  Rasterbereich: Seitenleiste;
}

.container2 .item-4 {
  Rasterbereich: Fußzeile;
}
<div Klasse="Container Container2">
  <div class="item item-1">Überschrift</div>
  <div Klasse="Artikel Artikel-2">Haupt</div>
  <div class="item item-3">Seitenleiste</div>
  <div class="item item-4">Fußzeile</div>
</div>

Rasterspaltenlücke/Rasterzeilenlücke/Grifflücke

  • Bezieht sich auf die Größe der Rasterlinien oder den Abstand zwischen Rasterelementen.
.container {
  Breite: 200px;
  Höhe: 200px;
  Anzeige: Raster;
  Hintergrundfarbe: Koralle;
  Rand: 10px;
}

.Container .Artikel {
  Rand: 1px durchgezogen #ccc;
  Hintergrundfarbe: Schokolade;
}
.container3 {
  Rastervorlagenspalten: Wiederholung (3, 30 %);
  Rastervorlagenzeilen: Wiederholung (3, 30 %);
  Gitterspaltenlücke: 2 %;
  Gitterzeilenlücke: 2%;
}
<div Klasse="Container Container3">
  <div Klasse="Artikel Artikel-1"></div>
  <div Klasse="Artikel Artikel-2"></div>
  <div Klasse="Artikel Artikel-3"></div>
  <div Klasse="Artikel Artikel-4"></div>
  <div Klasse="Artikel Artikel-5"></div>
  <div Klasse="Artikel Artikel-6"></div>
  <div Klasse="Artikel Artikel-7"></div>
  <div Klasse="Artikel Artikel-8"></div>
  <div Klasse="Artikel Artikel-9"></div>
</div>

Elemente ausrichten/Elemente ausrichtenElemente ausrichten

  • Den Inhalt des untergeordneten Elements an der vertikalen Spaltenachse ausrichten
  • align-items richtet den Inhalt des untergeordneten Elements an der horizontalen Zeilenachse aus
  • Beide Attribute haben vier Werte
  • In meinem Beispiel habe ich das Raster zum einfacheren Vergleich verschachtelt.
.container {
  Breite: 200px;
  Höhe: 200px;
  Anzeige: Raster;
  Hintergrundfarbe: Koralle;
  Rand: 10px;
}

.Container .Artikel {
  Rand: 1px durchgezogen #ccc;
  Hintergrundfarbe: Schokolade;
}

.container4 {
  Breite: 400px;
  Höhe: 200px;
  Rastervorlagenspalten: Wiederholung (4, 25 %);
  Rastervorlagenzeilen: Wiederholung (2, 50 %);
}
.container4 .item {
  Anzeige: Raster;
}
.container4 .item div {
  Hintergrundfarbe: Koralle;
  Rand: 1px gestrichelt #aaa
}
.container4 .item-1 {
  Rastervorlagenspalten: Wiederholung (2, 50 %);
  Rastervorlagenzeilen: Wiederholung (2, 50 %);
  Elemente ausrichten: Start;
}
.container4 .item-2 {
  Rastervorlagenspalten: Wiederholung (2, 50 %);
  Rastervorlagenzeilen: Wiederholung (2, 50 %);
  Elemente ausrichten: Ende;
}
.container4 .item-3 {
  Rastervorlagenspalten: Wiederholung (2, 50 %);
  Rastervorlagenzeilen: Wiederholung (2, 50 %);
  Elemente ausrichten: zentrieren;
}
.container4 .item-4 {
  Rastervorlagenspalten: Wiederholung (2, 50 %);
  Rastervorlagenzeilen: Wiederholung (2, 50 %);
  Elemente ausrichten: strecken;
}
.container4 .item-5 {
  Rastervorlagenspalten: Wiederholung (2, 50 %);
  Rastervorlagenzeilen: Wiederholung (2, 50 %);
  Elemente ausrichten: Start;
}
.container4 .item-6 {
  Rastervorlagenspalten: Wiederholung (2, 50 %);
  Rastervorlagenzeilen: Wiederholung (2, 50 %);
  Elemente ausrichten: Ende;
}
.container4 .item-7 {
  Rastervorlagenspalten: Wiederholung (2, 50 %);
  Rastervorlagenzeilen: Wiederholung (2, 50 %);
  Elemente ausrichten: zentrieren;
}
.container4 .item-8 {
  Rastervorlagenspalten: Wiederholung (2, 50 %);
  Rastervorlagenzeilen: Wiederholung (2, 50 %);
  Elemente ausrichten: strecken;
}
<div Klasse="Container Container4">
  <div Klasse="Artikel Artikel-1">
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
  </div>
  <div Klasse="Artikel Artikel-2">
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
  </div>
  <div Klasse="Artikel Artikel-3">
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
  </div>
  <div Klasse="Artikel Artikel-4">
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
  </div>
  <div Klasse="Artikel Artikel-5">
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
  </div>
  <div Klasse="Artikel Artikel-6">
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
  </div>
  <div Klasse="Artikel Artikel-7">
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
  </div>
  <div Klasse="Artikel Artikel-8">
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
  </div>

Inhalt ausrichten/Inhalt rechtfertigen

  • Legen Sie die Ausrichtung des untergeordneten Elements fest. „justify“ bedeutet vertikal und „align“ bedeutet horizontal.
.container {
  Breite: 200px;
  Höhe: 200px;
  Anzeige: Raster;
  Hintergrundfarbe: Koralle;
  Rand: 10px;
}

.Container .Artikel {
  Rand: 1px durchgezogen #ccc;
  Hintergrundfarbe: Schokolade;
}

.container5 {
  Breite: 700px;
  Höhe: 200px;
  Rastervorlagenspalten: Wiederholung (7, 14 %);
  Rastervorlagenzeilen: Wiederholung (2, 50 %);
}

.container5 .item {
  Anzeige: Raster;
}

.container5 .item div {
  Hintergrundfarbe: Koralle;
  Rand: 1px gestrichelt #aaa
}

.container5 .item-1 {
  Rastervorlagenspalten: Wiederholung (2, 40 %);
  Rastervorlagenzeilen: Wiederholung (2, 40 %);
  Inhalt ausrichten: Start;
}

.container5 .item-2 {
  Rastervorlagenspalten: Wiederholung (2, 40 %);
  Rastervorlagenzeilen: Wiederholung (2, 40 %);
  Inhalt ausrichten: Ende;
}

.container5 .item-3 {
  Rastervorlagenspalten: Wiederholung (2, 40 %);
  Rastervorlagenzeilen: Wiederholung (2, 40 %);
  Inhalt ausrichten: zentriert;
}

.container5 .item-4 {
  Rastervorlagenspalten: Wiederholung (2, 40 %);
  Rastervorlagenzeilen: Wiederholung (2, 40 %);
  Inhalt ausrichten: strecken;
}

.container5 .item-5 {
  Rastervorlagenspalten: Wiederholung (2, 40 %);
  Rastervorlagenzeilen: Wiederholung (2, 40 %);
  Inhalt ausrichten: Abstand herum;
}

.container5 .item-6 {
  Rastervorlagenspalten: Wiederholung (2, 40 %);
  Rastervorlagenzeilen: Wiederholung (2, 40 %);
  Inhalt ausrichten: Abstand dazwischen;
}

.container5 .item-7 {
  Rastervorlagenspalten: Wiederholung (2, 40 %);
  Rastervorlagenzeilen: Wiederholung (2, 40 %);
  Inhalt ausrichten: gleichmäßiger Abstand;
}

.container5 .item-8 {
  Rastervorlagenspalten: Wiederholung (2, 40 %);
  Rastervorlagenzeilen: Wiederholung (2, 40 %);
  Inhalt ausrichten: Start;
}

.container5 .item-9 {
  Rastervorlagenspalten: Wiederholung (2, 40 %);
  Rastervorlagenzeilen: Wiederholung (2, 40 %);
  Inhalt ausrichten: Ende;
}

.container5 .item-10 {
  Rastervorlagenspalten: Wiederholung (2, 40 %);
  Rastervorlagenzeilen: Wiederholung (2, 40 %);
  Inhalt ausrichten: zentriert;
}

.container5 .item-11 {
  Rastervorlagenspalten: Wiederholung (2, 40 %);
  Rastervorlagenzeilen: Wiederholung (2, 40 %);
  Inhalt ausrichten: strecken;
}

.container5 .item-12 {
  Rastervorlagenspalten: Wiederholung (2, 40 %);
  Rastervorlagenzeilen: Wiederholung (2, 40 %);
  Inhalt ausrichten: Abstand herum;
}

.container5 .item-13 {
  Rastervorlagenspalten: Wiederholung (2, 40 %);
  Rastervorlagenzeilen: Wiederholung (2, 40 %);
  Inhalt ausrichten: Abstand dazwischen;
}

.container5 .item-14 {
  Rastervorlagenspalten: Wiederholung (2, 40 %);
  Rastervorlagenzeilen: Wiederholung (2, 40 %);
  Inhalt ausrichten: gleichmäßiger Abstand;
}
<div Klasse="Container Container5">
  <div Klasse="Artikel Artikel-1">
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
  </div>
  <div Klasse="Artikel Artikel-2">
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
  </div>
  <div Klasse="Artikel Artikel-3">
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
  </div>
  <div Klasse="Artikel Artikel-4">
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
  </div>
  <div Klasse="Artikel Artikel-5">
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
  </div>
  <div Klasse="Artikel Artikel-6">
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
  </div>
  <div Klasse="Artikel Artikel-7">
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
  </div>
  <div Klasse="Artikel Artikel-8">
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
  </div>
  <div Klasse="Artikel Artikel-9">
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
  </div>
  <div Klasse="Artikel Artikel-10">
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
  </div>
  <div Klasse="Artikel Artikel-11">
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
  </div>
  <div Klasse="Artikel Artikel-12">
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
  </div>
  <div Klasse="Artikel Artikel-13">
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
  </div>
  <div Klasse="Artikel Artikel-14">
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
    <div>Liste</div>
  </div>
</div>

Raster-Auto-Spalten/Raster-Auto-ZeilenRaster-Spalten

  • Wenn der Wert die Form 1/2 hat, bedeutet dies, dass das Raster in der ersten Spalte beginnt und in der zweiten Spalte endet. Wenn das durch dieses Attribut definierte Raster den Bereich des übergeordneten Elements überschreitet, wird automatisch ein implizites Raster generiert.
  • Die Eigenschaften „grid-auto-columns“ und „grid-auto-rows“ werden verwendet, um die Breite dieser impliziten Rasterspuren anzugeben.
.container {
  Breite: 200px;
  Höhe: 200px;
  Anzeige: Raster;
  Hintergrundfarbe: Koralle;
  Rand: 10px;
}

.Container .Artikel {
  Rand: 1px durchgezogen #ccc;
  Hintergrundfarbe: Schokolade;
}

.container6 {
  Breite: 120px;
  Höhe: 180px;
  Rastervorlagenspalten: 60px 60px;
  Rastervorlagenzeilen: 90px 90px;
  Raster-Auto-Spalten: 60px;
}
.container6 .item-1 {
  Gitterspalte: 1 / 2;
  Gitterzeile: 2 / 3;
  Rand: 1px durchgezogen #ccc;
}
.container6 .item-2 {
  Gitterspalte: 5 / 6;
  Gitterzeile: 2 / 3;
  Rand: 1px durchgezogen #ccc;
}
<div Klasse="Container Container6">
  <div Klasse="item-1">1/2&2/3</div>
  <div Klasse="item-2">5/6&2/3</div>
</div>

Raster-Auto-Flow

  • Automatisch anordnen, wenn keine Rasterelemente vorhanden sind
  • Zeile bedeutet von links nach rechts, Spalte bedeutet von oben nach unten
.container {
  Breite: 200px;
  Höhe: 200px;
  Anzeige: Raster;
  Hintergrundfarbe: Koralle;
  Rand: 10px;
}

.Container .Artikel {
  Rand: 1px durchgezogen #ccc;
  Hintergrundfarbe: Schokolade;
}

.container7 {
  Anzeige: Raster;
  Breite: 200px;
  Höhe: 40px;
  Rastervorlagenspalten: 40px 40px 40px 40px 40px;
  Rastervorlagenzeilen: 40px 40px;
  /* Raster-Auto-Flow: Zeile; */
  Raster-Auto-Flow: Spalte;
}
.container7 .item-1 {
  Gitterspalte: 1;
  Gitterzeile: 1 / 3;
}

.container7 .item-5 {
  Gitterspalte: 5;
  Gitterzeile: 1 / 3;
}
<div Klasse="Container Container7">
  <div Klasse="Artikel Artikel-1">1</div>
  <div Klasse="Artikel Artikel-2">2</div>
  <div Klasse="Artikel Artikel-3">3</div>
  <div Klasse="Artikel Artikel-4">4</div>
  <div Klasse="Artikel Artikel-5">5</div>
</div>

Zu untergeordneten Elementen hinzugefügte Attribute

Rasterspaltenanfang/Rasterspaltenende/Rasterzeilenanfang/Rasterzeilenende/Rasterspalte/Rasterzeile

  • Definiert, wo das Raster beginnt oder endet
  • Der Wert ist eine Zahl, die den Zeilenanfang angibt. Der Wert ist Spanne plus eine Zahl, die angibt, dass die Position dieser Linie abgedeckt ist
.container {
  Breite: 200px;
  Höhe: 200px;
  Anzeige: Raster;
  Hintergrundfarbe: Koralle;
  Rand: 10px;
}

.Container .Artikel {
  Rand: 1px durchgezogen #ccc;
  Hintergrundfarbe: Schokolade;
}

.container8 {
  Rand oben: 20px;
  Rastervorlagenspalten: Wiederholung (5, 20 %);
  Rastervorlagenzeilen: Wiederholung (5, 20 %);
}
.container8 .item-1 {
  Rasterspaltenanfang: 2;
  Gitterspaltenende: 4;
  Rasterzeilenstart: 1;
  Gitterzeilenende: 2;
}
.container8 .item-2 {
  Rasterspaltenanfang: 4;
  Gitterspaltenende: Spanne 5;
  Rasterzeilenstart: 2;
  Gitterzeilenende: Spanne 5;
}
.container8 .item-3 {
  Rasterspalte: 1 / Spanne 2;
  Gitterzeile: 2 / Spanne 4;
}
<div Klasse="Container Container8">
  <div Klasse="Artikel Artikel-1">Artikel-1</div>
  <div Klasse="Artikel Artikel-2">Artikel-2</div>
  <div Klasse="Artikel Artikel-3">Artikel-3</div>
</div>

sich selbst rechtfertigen/sich selbst ausrichten

Der Inhalt der Rasterelemente wird an den Rasterlinien ausgerichtet

.container {
  Breite: 200px;
  Höhe: 200px;
  Anzeige: Raster;
  Hintergrundfarbe: Koralle;
  Rand: 10px;
}

.Container .Artikel {
  Rand: 1px durchgezogen #ccc;
  Hintergrundfarbe: Schokolade;
}
.container9 {
  Breite: 400px;
  Höhe: 200px;
  Rastervorlagenspalten: Wiederholung (4, 25 %);
  Rastervorlagenzeilen: Wiederholung (2, 50 %);
}
.container9 .item-1 {
  sich rechtfertigen: anfangen;
}
.container9 .item-2 {
  sich rechtfertigen: Ende;
}
.container9 .item-3 {
  sich selbst rechtfertigen: zentrieren;
}
.container9 .item-4 {
  sich rechtfertigen: strecken;
}
.container9 .item-5 {
  selbst ausrichten: starten;
}
.container9 .item-6 {
  selbst ausrichten: Ende;
}
.container9 .item-7 {
  selbst ausrichten: zentrieren;
}
.container9 .item-8 {
  selbst ausrichten: strecken;
}
<div Klasse="Container Container9">
  <div Klasse="Artikel Artikel-1">Artikel-1</div>
  <div Klasse="Artikel Artikel-2">Artikel-2</div>
  <div Klasse="Artikel Artikel-3">Artikel-3</div>
  <div Klasse="Artikel Artikel-4">Artikel-4</div>
  <div Klasse="Artikel Artikel-5">Artikel-5</div>
  <div Klasse="Artikel Artikel-6">Artikel-6</div>
  <div Klasse="Artikel Artikel-7">Artikel-7</div>
  <div Klasse="Artikel Artikel-8">Artikel-8</div>
</div>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<:  Detailliertes Beispiel für die Verwendung von Typescript zum Einkapseln von Axios in Vue3

>>:  HTML+CSS-Implementierungscode für abgerundete Rechtecke

Artikel empfehlen

JS implementiert Layoutkonvertierung in Animation

Beim Schreiben von Animationen mit JS wird häufig...

Zusammenfassung einiger Tipps zum Umgehen der Node.js-Codeausführung

Inhaltsverzeichnis 1. untergeordneter Prozess 2. ...

Lösung für das Problem der unvollständigen Anzeige des Inhalts der ausgewählten Dropdown-Box in HTML und der teilweisen Abdeckung

Heute ist mir ein Problem aufgefallen: Der Inhalt ...

Zusammenfassung der drei Phasen der Entwicklung eines visuellen Designers

Viele Leute haben dieses Buch gelesen: „Entwickel...

MySQL 8.0-Installationstutorial unter Linux

Dieser Artikel beschreibt Ihnen, wie Sie MySQL 8....

Zusammenfassung mehrerer häufig verwendeter String-Methoden in JavaScript (unbedingt lesenswert für Anfänger)

Mehrere häufig verwendete String-Methoden in Java...

Entwicklungshandbuch für Chrome-Plugins (Erweiterungen) (vollständige Demo)

Inhaltsverzeichnis Vorne geschrieben Vorwort Was ...

CSS verwendet die Pseudoklasse „placeholder-showed“, um den schwebenden Texteffekt des Eingabefelds zu erzielen

In diesem Beitrag verwenden wir die Pseudoklasse ...

Einführung in die Verwendung und Deaktivierung von Transparent Huge Pages in Linux

Einführung Da die Anforderungen an die Computerte...

HTML+CSS+JavaScript zum Erstellen eines einfachen Tic-Tac-Toe-Spiels

Inhaltsverzeichnis Implementieren von HTML CSS hi...

Detailliertes Tutorial zum Bereitstellen von Springboot oder Nginx mit Kubernetes

1 Einleitung Nachdem „Maven Springboot mit einem ...

Detaillierte Erläuterung des Installationsprozesses von Jenkins auf CentOS 7

Installieren Sie Jenkins über Yum 1. Installation...

Detaillierte Erklärung des JQuery-Selektors

Inhaltsverzeichnis Grundlegende Selektoren: Ebene...

Lernen Sie, wie Sie Portainer zur Verwaltung mehrerer Docker-Containerumgebungen verwenden.

Inhaltsverzeichnis Portainer verwaltet mehrere Do...

Scrollen von HTML-Marquee-Zeichenfragmenten

Seine Eigenschaften sind wie folgt: Richtung Stell...