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

Prinzip und Anwendungsbeispiele des URL-Umschreibmechanismus von Nginx

Durch das Umschreiben der URL lässt sich die bevo...

htm-Anfängerhinweise (unbedingt für Anfänger lesen)

1. Was ist HTML HTML (HyperText Markup Language):...

Detaillierte Erläuterung des dynamischen Zeitbereichsgrenzfalls im Vue el-date-picker

Es gibt zwei Situationen 1. Startzeit und Endzeit...

Installationstutorial auf Unternehmensebene unter Verwendung des LAMP-Quellcodes

Inhaltsverzeichnis LAMP-Architektur 1.Lampeneinfü...

Eine kurze Analyse der Unterschiede zwischen „:=“ und „=“ in MySQL

= Nur beim Setzen und Aktualisieren wirkt es wie ...

Sammlung einer Zusammenfassung der HTML-Iframe-Nutzung

Detaillierte Analyse der Iframe-Nutzung <iframe...

Was sind Ihre Grundsätze für die Gestaltung von Indizes? Wie lassen sich Indexfehler vermeiden?

Inhaltsverzeichnis Primärschlüsselindex Erstellen...

Das einfachste Tutorial zur Sicherung und Wiederherstellung von MySQL-Daten aller Zeiten (Teil 2) (Teil 36)

Datensicherung und Wiederherstellung Teil 2, wie ...

Markodwns ausführliche Erklärung der Idee des synchronen Scrollens mit Titelausrichtung

Vorwort Ich muss dem Markodwn-Editor, den ich ger...

Exquisiter Snake-Implementierungsprozess in JavaScript

Inhaltsverzeichnis 1. HTML-Struktur erstellen 2. ...

So verwenden Sie die Wurmreplikation in einer MySQL-Datentabelle

Einfach ausgedrückt besteht die MySQL-Wurmreplika...

Teilen Sie 8 MySQL-Fallstricke, die Sie erwähnen müssen

MySQL ist einfach zu installieren, schnell und ve...

Detailliertes Tutorial zur Installation von MySQL 8.0.19 in der Zip-Version unter Win10

Inhaltsverzeichnis 1. Nach dem Download entpacken...

MySQL-Reihe von Erfahrungszusammenfassungen und Analyse-Tutorials zu NULL-Werten

Inhaltsverzeichnis 1. Testdaten 2. Die Unannehmli...

Mysql SQL-Anweisungskommentare

Sie können MySQL-SQL-Anweisungen Kommentare hinzu...