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

Detaillierte Erklärung, wie MySQL Phantom-Lesevorgänge löst

1. Was ist Phantomlesen? Wenn bei einer Transakti...

vue cli3 implementiert die Schritte der Verpackung nach Umgebung

Das mit CLI3 erstellte Vue-Projekt wird als Nullk...

Detaillierte Erläuterung der Nginx-Rewrite-Jump-Anwendungsszenarien

Anwendungsszenario 1: Domänennamenbasierte Umleit...

Die gleichzeitige Ausführung unter Linux ist einfach. Gehen Sie dazu einfach wie folgt vor

Parallelitätsfunktionen Zeit für i in `grep serve...

Remote-Bereitstellung von Maven-Projekten && So konfigurieren Sie eine Datenbankverbindung mit Tomcat

eins. Remote-Bereitstellung mit Tomcat 1.1 Aufget...

So installieren und deinstallieren Sie open-vswitch unter Linux

1. Kompilieren und installieren Sie OVS aus dem Q...

Foreman Ubuntu16 Schnellinstallation

Kurzanleitung Das Foreman-Installationsprogramm i...

Detaillierte Erklärung, wie zwei Node.js-Prozesse kommunizieren

Inhaltsverzeichnis Vorwort Kommunikation zwischen...

Beispiel für die Verwendung von CSS3 zum Anordnen von Elementen um einen Mittelpunkt

Dieser Artikel zeigt ein Beispiel, wie CSS3 verwe...

Analyse des Framework-Prinzips des Linux-Eingabesubsystems

Eingabe-Subsystem-Framework Das Linux-Eingabesubs...

Analyse des HTTP-Schnittstellentestprozesses basierend auf Postman

Ich habe zufällig ein tolles Tutorial zum Thema k...

CSS löst das Problem der Front-End-Bildverformung perfekt

Ich habe in der Toutiao IT School einen Artikel g...

Konfiguration und Lizenzaktivierung der Remotedesktopdienste von Windows Server 2016 (2 Benutzer)

Die Standardanzahl von Remotedesktopverbindungen ...

Wie wird die Transaktionsisolation von MySQL erreicht?

Inhaltsverzeichnis Gleichzeitige Szenarien Schrei...

Der Tabellenkörper in HTML kann nach oben und unten sowie nach links und rechts verschoben werden.

Wenn der Tabellenkopf fixiert ist, muss er in zwe...