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

MySQL 5.7.17 Installations- und Konfigurations-Tutorial unter Linux (Ubuntu)

Vorwort Ich habe MySQL 5.6 bereits installiert. D...

MySQL 8.0.13 Download- und Installations-Tutorial mit Bildern und Text

MySQL ist die am häufigsten verwendete Datenbank....

Erläuterung der Schritte für Tomcat zur Unterstützung des https-Zugriffs

So ermöglichen Sie Tomcat die Unterstützung des h...

Schritte zur VSCode-Konfiguration mit der Git-Methode

Git ist in vscode integriert und viele Vorgänge k...

Implementierung von FIFO in der Linux-Prozesskommunikation

FIFO-Kommunikation (First In First Out) FIFO-Name...

Häufig gestellte Fragen zu Docker

Docker ordnet Ports nur IPv6 zu, nicht aber IPv4 ...

MySQL-Datenbank implementiert OLTP-Benchmark-Test basierend auf Sysbench

Sysbench ist ein hervorragendes Benchmark-Tool, d...

Implementierung eines einfachen Weihnachtsspiels mit JavaScript

Inhaltsverzeichnis Vorwort Ergebnisse erzielen Co...

Testfragen und Referenzantworten zum Thema Webdesign und Produktion

<br />Test zu Webdesign und -produktion, Tei...

Eine kurze Analyse von Linux, um den Firewall-Status und den Status der für die Außenwelt geöffneten Ports zu überprüfen

1. Überprüfen Sie den Firewall-Status Überprüfen ...

MySQL implementiert eine Beispielmethode zum Anmelden ohne Kennwort

Spezifische Methode: Schritt 1: Stoppen Sie den M...

So konfigurieren Sie die PDFLatex-Umgebung in Docker

Technischer Hintergrund Latex ist ein unverzichtb...

Countdown-Effekt mit Javascript implementieren

Verwenden Sie Javascript, um den Countdown-Effekt...

Webdesign-Zusammenfassung

<br />Von der Geburt meiner ersten persönlic...

Vue implementiert dreidimensionales Säulendiagramm basierend auf E-Charts

Das dreidimensionale Säulendiagramm besteht aus d...