Articles
Einführung in CSS
CSS-Eigenschaften im Zusammenhang mit dem Rasterlayout

CSS-Eigenschaften im Zusammenhang mit dem Rasterlayout

Dieser Artikel erklärt CSS-Eigenschaften im Zusammenhang mit dem Rasterlayout.

Sie können lernen, wie man Raster und Inline-Raster beschreibt.

YouTube Video

HTML zur Vorschau

css-grid.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-grid.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Layout</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Layout Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>grid</h3>
 23            <section style="width: 100%; height: 350px;">
 24                <header><h4>display: grid; grid-template-columns: 100px 200px auto; grid-template-rows: 100px auto 50px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="grid-box">
 27                        <div class="grid-item">Item 1</div>
 28                        <div class="grid-item">Item 2</div>
 29                        <div class="grid-item">Item 3</div>
 30                        <div class="grid-item">Item 4</div>
 31                        <div class="grid-item">Item 5</div>
 32                        <div class="grid-item">Item 6</div>
 33                    </div>
 34                </section>
 35            </section>
 36            <section style="width: 100%; height: 550px;">
 37                <header><h4>display: grid; grid-template-columns: 120px 1fr 80px; grid-template-rows: 100px 1fr 100px;</h4></header>
 38                <section class="sample-view">
 39                    <div class="grid-container" style="color: #666;">
 40                        <header class="grid-header">Header</header>
 41                        <aside class="grid-sidebar">Sidebar</aside>
 42                        <article class="grid-content">
 43                            <p>Content</p>
 44                        </article>
 45                        <aside class="grid-ads">Ads</aside>
 46                        <footer class="grid-footer">Footer</footer>
 47                    </div>
 48                </section>
 49            </section>
 50        </article>
 51        <article>
 52            <h3>gap</h3>
 53            <section style="height: 300px;">
 54                <header><h4>display: grid; gap: 30px 10px;</h4></header>
 55                <section class="sample-view">
 56                    <div class="gap-grid-container">
 57                        <div>Item 1</div>
 58                        <div>Item 2</div>
 59                        <div>Item 3</div>
 60                        <div>Item 4</div>
 61                        <div>Item 5</div>
 62                        <div>Item 6</div>
 63                    </div>
 64                </section>
 65            </section>
 66            <section>
 67                <header><h4>display: flex; gap: 50px;</h4></header>
 68                <section class="sample-view">
 69                    <div class="gap-flex-container">
 70                        <div>Item 1</div>
 71                        <div>Item 2</div>
 72                        <div>Item 3</div>
 73                    </div>
 74                </section>
 75            </section>
 76        </article>
 77        <article>
 78            <h3>grid-template-areas</h3>
 79            <section style="height: 350px;">
 80                <header><h4>grid-template-areas: "header header" "sidebar content" "footer footer";</h4></header>
 81                <section class="sample-view">
 82                    <div class="grid-template-areas-container">
 83                        <div class="grid-template-areas-header">Header</div>
 84                        <div class="grid-template-areas-sidebar">Sidebar</div>
 85                        <div class="grid-template-areas-content">Content</div>
 86                        <div class="grid-template-areas-footer">Footer</div>
 87                    </div>
 88                </section>
 89            </section>
 90        </article>
 91        <article>
 92            <h3>inline-grid</h3>
 93            <section>
 94                <header><h4>display: inline-grid</h4></header>
 95                <section class="sample-view">
 96                  Here is an inline grid:
 97                  <span class="inline-grid-container">
 98                      <div class="inline-grid-item">1</div>
 99                      <div class="inline-grid-item">2</div>
100                      <div class="inline-grid-item">3</div>
101                      <div class="inline-grid-item">4</div>
102                  </span>
103                  This is contained within a paragraph.
104                </section>
105            </section>
106        </article>
107    </main>
108</body>
109</html>

Rasterlayout

grid 

 1.grid-box {
 2    display: grid;
 3    grid-template-columns: 100px 200px auto;
 4    grid-template-rows: 100px auto 50px;
 5    gap: 10px;
 6    background-color: lightblue;
 7    border: none;
 8    height: 200px;
 9}
10
11.grid-item {
12    background-color: lightskyblue;
13    width: 100%;
14    padding: 0;
15    text-align: center;
16    border: 2px solid black;
17}

Ein Raster ist ein Layoutsystem zur Ausrichtung von Elementen in zweidimensionalen Zeilen und Spalten. Mit einem Raster können Sie einfach und flexibel komplexe Layouts erstellen, die mit herkömmlichen float- oder position-Methoden schwierig waren. Während Flexbox bei eindimensionalen Layouts hervorragend ist, eignet sich das Raster für zweidimensionale Layouts.

  • Die Klasse grid-box wendet ein Rasterlayout an, indem sie grid in der display-Eigenschaft angibt. Dieses Element wird als Rastercontainer bezeichnet.
  • Die Eigenschaft grid-template-columns legt die Breite der Rasterspalten fest. In diesem Beispiel ist die erste Spalte 100px breit, die zweite Spalte 200px und die dritte Spalte nimmt den verbleibenden Platz ein (auto).
  • Die Eigenschaft grid-template-rows legt die Höhe der Rasterzeilen fest. Die erste Zeile ist 100px hoch, die zweite Zeile ist automatisch (auto) und die dritte Zeile ist 50px hoch.
  • Die Eigenschaft gap legt den Abstand zwischen Rasterelementen fest. 10px Abstand zwischen Spalten und Zeilen hinzufügen.

Grundlegende Terminologie

  1. Ein Rastercontainer ist ein Element, bei dem die display-Eigenschaft auf grid gesetzt ist, und dessen Kinder werden zu Rasterelementen.
  2. Rasterelemente sind die unter einem Rastercontainer direkt platzierten Kindelemente.

Wichtige Rastereigenschaften

grid-template-columns & grid-template-rows 
1.container {
2    grid-template-columns: 1fr 2fr 1fr;
3}
  • Die Eigenschaften grid-template-columns und grid-template-rows definieren die Größe jeder Spalte und Reihe.
  • Es können Einheiten wie px und % sowie fr (Anteil) verwendet werden, um ein Verhältnis des verbleibenden Platzes anzugeben.
    • In diesem Beispiel gibt es drei Spalten, und die zweite Spalte ist doppelt so breit wie die anderen.
grid-column & grid-row 
 1.container {
 2  display: grid;
 3  grid-template-columns: repeat(4, 1fr); /* 4 columns */
 4  grid-template-rows: repeat(3, 100px); /* 3 rows */
 5}
 6
 7.item {
 8  grid-column: 2 / 4;
 9  grid-row: 1 / 3;
10}
  • grid-column und grid-row geben an, in welcher Spalte oder Zeile das Gitterelement platziert wird.
    • In diesem Beispiel erstreckt sich das Element von der 2. Spalte bis zur 4. Spalte und von der 1. Zeile bis zur 3. Zeile.
grid-auto-rows & grid-auto-columns 
 1.container {
 2  display: grid;
 3  grid-template-rows: 100px 200px; /* Explicitly define 2 rows */
 4  grid-template-columns: 1fr 2fr; /* Explicitly define 2 columns */
 5  grid-auto-rows: 150px; /* Automatically added rows will be 150px */
 6  grid-auto-columns: 100px; /* Automatically added columns will be 100px */
 7}
 8
 9.item {
10  grid-column: 3; /* Positioned in the 3rd column (auto-generated) */
11  grid-row: 3; /* Positioned in the 3rd row (auto-generated) */
12}
  • grid-auto-rows und grid-auto-columns sind Eigenschaften, die die Größe von Zeilen und Spalten steuern, die automatisch erzeugt werden, wenn Gitterlinien oder -spalten nicht explizit definiert sind.
    • In diesem Beispiel sind 2 Zeilen und 2 Spalten explizit definiert, aber wenn weitere Elemente hinzugefügt werden, werden neue Zeilen oder Spalten entsprechend den Vorgaben von grid-auto-rows und grid-auto-columns automatisch erzeugt.
justify-items & align-items 
1.container {
2    justify-items: center; /* Center items horizontally */
3    align-items: center;   /* Center items vertically */
4}
  • Richten Sie Gitterelemente horizontal (justify-items) und vertikal (align-items) aus.
grid-area 
1/* grid-area syntax
2grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
3*/
4.item {
5    grid-area: 1 / 2 / 3 / 4;
6}
  • grid-area gibt an, in welchem Bereich des Grid-Containers das Grid-Element platziert werden soll.
    • In diesem Beispiel bedeutet dies, dass der Bereich von der 1. Zeile bis zur 3. Zeile und von der 2. Spalte bis zur 4. Spalte belegt wird.
gap 
1.container {
2    gap: 10px 20px; /* 10px space between rows, 20px space between columns */
3}
  • gap fügt Abstände zwischen Spalten und Zeilen hinzu. Sie können die Abstände zwischen Spalten und Zeilen auch individuell mit column-gap und row-gap festlegen.
grid-auto-flow 
1.container {
2    grid-auto-flow: column; /* Add items in the column direction */
3}
  • grid-auto-flow ist eine Eigenschaft, die die Richtung festlegt, in der Elemente platziert werden, entweder nach Zeilen oder nach Spalten.

Beispiel für komplexe Layouts 

 1.grid-container {
 2    display: grid;
 3    grid-template-columns: 120px 1fr 80px;
 4    grid-template-rows: 50px 1fr 50px;
 5    gap: 10px;
 6    background-color: transparent;
 7    border: none;
 8    height: 400px;
 9}
10
11.grid-header {
12    grid-column: 1 / 4;
13    background-color: lightblue;
14}
15
16.grid-sidebar {
17    grid-column: 1 / 2;
18    grid-row: 2 / 3;
19    height: 100%;
20    background-color: lightslategray;
21    color: white;
22}
23
24.grid-content {
25    grid-column: 2 / 3;
26    grid-row: 2 / 3;
27    background-color: lightskyblue;
28}
29
30.grid-content p {
31    margin: 0;
32    padding: 0;
33    height: 260px;
34}
35
36.grid-ads {
37    grid-column: 3 / 4;
38    grid-row: 2 / 3;
39    height: 100%;
40    background-color: lightsteelblue;
41}
42
43.grid-footer {
44    grid-column: 1 / 4;
45    background-color: lightgray;
46}

Auf diese Weise ermöglicht es Grid, ein komplettes Webseiten-Layout mit einfachem Code zu erstellen.

  • In diesem Beispiel gibt es drei Spalten (Seitenleiste, Hauptinhalt und Werbung) und drei Zeilen (Kopfzeile, Inhalt und Fußzeile).
  • Die Kopf- und Fußzeile nehmen die gesamte Breite der Seite ein, wobei der Inhalt in der Mitte liegt und die Seitenleiste und die Werbung sich an beiden Seiten befinden.

Vorteile von Rasterlayouts

Die Vorteile des Rasterlayouts umfassen die folgenden Punkte:.

  • Einfache zweidimensionale Layouts: Durch die Verwaltung des Layouts in Zeilen und Spalten können auch komplexe Layouts mit weniger Code umgesetzt werden.
  • Kompatibel mit responsivem Design: Das Rastersystem erleichtert das Erstellen responsiver Designs, die sich an unterschiedliche Bildschirmgrößen anpassen.

Eigenschaft gap 

 1.gap-grid-container {
 2    display: grid;
 3    grid-template-columns: repeat(3, 1fr);
 4    gap: 30px 10px;
 5    background-color: transparent;
 6    border: none;
 7    height: 200px;
 8}
 9
10.gap-grid-container div {
11    width: 100px;
12    background-color: lightskyblue;
13}
14
15.gap-flex-container {
16    display: flex;
17    gap: 50px;
18}
19
20.gap-flex-container div {
21    width: 80px;
22    background-color: lightgreen;
23}

Die Eigenschaft gap wird in Raster- und Flexbox-Layouts verwendet, um den Abstand (Lücken) zwischen Elementen festzulegen. Mit dieser Eigenschaft können Sie leicht Abstände zwischen den Kindelementen einfügen.

  • In der Klasse gap-grid-container wird ein Abstand von 30px vertikal und 10px horizontal zwischen den einzelnen Elementen festgelegt. Da ein Raster mit 3 Spalten durch grid-template-columns erstellt wird, werden Abstände vertikal und horizontal zwischen den Elementen angewendet. In der Klasse gap-flex-container wird ein Abstand von 50px zwischen den drei Elementen im Flexbox angewendet.

Grundlegende Syntax 

1.container {
2  display: grid; /* or flex */
3  gap: <row-gap> <column-gap>;
4}
  • Der row-gap gibt den Abstand zwischen den Zeilen an. Dies ist der vertikale Abstand in Raster- oder Flex-Layouts.
  • Der column-gap gibt den Abstand zwischen den Spalten an. Dies ist der horizontale Abstand.

Wenn keine zwei Werte angegeben sind, wird ein Wert sowohl auf row-gap als auch auf column-gap angewendet.

Vorteile der Eigenschaft gap

Die Vorteile der Eigenschaft gap umfassen Folgendes:.

  • Einfache Abstandseinstellung: Der Code zum Festlegen der Abstände zwischen Kindelementen wird einfacher, da zusätzliche Margen oder Abstände zwischen den Elementen nicht erforderlich sind.
  • Flexible Anpassung: Es unterstützt problemlos responsives Design und ermöglicht flexible Designanpassungen.

Eigenschaft grid-template-areas 

 1.grid-template-areas-container {
 2    display: grid;
 3    grid-template-columns: 1fr 2fr; /* 2 columns */
 4    grid-template-rows: auto auto;  /* 2 rows */
 5    grid-template-areas:
 6      "header header"
 7      "sidebar content"
 8      "footer footer"; /* In the 3rd row, the footer spans across */
 9    gap: 10px;
10    height: 250px;
11}
12
13.grid-template-areas-container div {
14    width: 100%;
15    height: 100%;
16}
17
18.grid-template-areas-header {
19    grid-area: header; /* Placed in the "header" area */
20    background-color: lightblue;
21}
22
23.grid-template-areas-sidebar {
24    grid-area: sidebar; /* Placed in the "sidebar" area */
25    background-color: lightslategray;
26}
27
28.grid-template-areas-content {
29    grid-area: content; /* Placed in the "content" area */
30    background-color: lightskyblue;
31}
32
33.grid-template-areas-footer {
34    grid-area: footer; /* Placed in the "footer" area */
35    background-color: lightsteelblue;
36}

Die Eigenschaft grid-template-areas bietet eine Möglichkeit, Bereiche innerhalb eines Rastercontainers zu benennen und diese Namen zu verwenden, um Rasterelemente einfach zu positionieren. Die Verwendung dieser Eigenschaft ermöglicht visuell intuitive Layoutdefinitionen.

Elemente, die in benannten Bereichen positioniert sind, die von der Eigenschaft grid-template-areas angegeben werden, sollten denselben Namen mit der Eigenschaft grid-area zugewiesen bekommen. Selbst wenn Elemente mehrere Zellen umfassen, werden sie automatisch korrekt positioniert.

In diesem Beispiel wird das Raster wie folgt erstellt:.

  • In der ersten Zeile wird "header" über zwei Spalten platziert.
  • "Sidebar" wird in der zweiten Zeile links und "content" rechts platziert.
  • "Footer" wird in der dritten Zeile über zwei Spalten platziert.

Grundlegende Verwendung 

1grid-template-areas:
2    "area1 area2 area3"
3    "area1 area4 area5";

In der Eigenschaft grid-template-areas wird der Name des Bereichs für jede Zeile angegeben. Indem Elemente in Bereiche mit zugewiesenen Namen platziert werden, können Sie Layouts einfach erstellen. - In diesem Beispiel wird ein Raster mit 2 Zeilen und 3 Spalten erstellt, und jede Zelle wird als area1, area2 usw. benannt.

Leere Zellen mit . definieren 

1grid-template-areas:
2  "header header header"
3  "sidebar . content"
4  "footer footer footer";

Wenn Sie leere Zellen in Ihrem Layout haben möchten, können Sie diese durch einen Punkt (.) darstellen. - Wie in diesem Beispiel wird die zweite Spalte leer, indem ein Punkt (.) zwischen sidebar und content angegeben wird.

Vorteile der Eigenschaft grid-template-areas

Zu den Vorteilen der Eigenschaft grid-template-areas gehören die folgenden Punkte:.

  • Visuelles Layout: Es ermöglicht Ihnen, das Layout visuell darzustellen, was das Verständnis des Designs erleichtert.
  • Einfache Verschiebung von Elementen: Sie können das Layout der Elemente einfach anpassen, indem Sie die Bereichsdefinitionen im CSS ändern, ohne das HTML zu modifizieren.

Notizen

Beim Verwenden der Eigenschaft grid-template-areas ist es wichtig, auf die folgenden Punkte zu achten:.

  • Die Anzahl der Namen in jeder Zeile muss mit der Anzahl der definierten Spalten übereinstimmen.
  • Wenn Sie denselben Namen mehreren Zellen zuweisen, werden diese Zellen zusammengeführt, aber bei der Zuweisung zu verschiedenen Zeilen oder Spalten muss der Bereich quadratisch sein.

inline-grid 

 1.inline-grid-container {
 2    display: inline-grid;
 3    grid-template-columns: 1fr 1fr;
 4    gap: 5px;
 5    background-color: lightblue;
 6}
 7.inline-grid-item {
 8    background-color: lightskyblue;
 9    width: 50px;
10    padding: 0;
11    margin: 0;
12}

inline-grid ist einer der Werte der CSS-Eigenschaft display. Durch Anwenden dieser Eigenschaft verhält sich das Element wie ein Inline-Container und erstellt intern einen Grid-Formatierungskontext. Im Gegensatz zu display: grid verhält es sich wie ein Inline-Element im Dokumentfluss.

Anwendungsfälle für inline-grid

inline-grid ist nicht so verbreitet wie grid, kann aber in bestimmten Szenarien effektiv eingesetzt werden.

  • Grid im Inline-Kontext: Praktisch, wenn Sie ein Grid neben Textinhalten oder anderen Inline-Elementen platzieren möchten. Zum Beispiel ist es nützlich, wenn eine Grid-Struktur für Buttons, Abzeichen, Labels usw. benötigt wird, diese aber inline angezeigt werden soll, ohne den Textfluss zu stören.

  • Layoutsteuerung in Inline-Elementen: Selbst bei komplexen Layouts in Inline-Elementen wie Links, Buttons oder Spans kann inline-grid die interne Struktur mit einem Grid-Layout verwalten, ohne Block-Darstellung zu verwenden.

1<button class="inline-grid">
2    <span>Icon</span>
3    <span>Text</span>
4</button>

In diesem Fall zeigt der Button Symbole und Text in einem Grid an, bleibt jedoch inline im Dokumentfluss.

  • Responsive Inline-Komponenten: inline-grid kann für kleine Komponenten verwendet werden, die Teil von Inline-Inhalten sind und ein Grid-Layout erfordern. Zum Beispiel ist es geeignet für Inline-Formulare, Abzeichen, Produktetiketten usw., bei denen Sie das Layout mit einem Grid anpassen möchten, während es inline bleibt.

Ausrichtung und Größenanpassung von inline-grid 

1.inline-grid {
2    display: inline-grid;
3    vertical-align: middle;
4}
  • Wie andere Inline-Elemente respektiert inline-grid die vertikale Ausrichtung in Bezug auf den umgebenden Inhalt. Sie können die Ausrichtung des Grids mit der Eigenschaft vertical-align steuern.
1.inline-grid {
2    display: inline-grid;
3    width: 200px;
4    height: 100px;
5}
  • In Bezug auf die Größe nimmt ein inline-grid-Element nur die Breite ein, die für seinen Grid-Inhalt erforderlich ist. Falls erforderlich, können Sie die Breite, Höhe sowie die Mindest- und Höchstmaße explizit festlegen.
1.inline-grid {
2    display: inline-grid;
3    grid-template-columns: auto 1fr;
4}

Es ist auch möglich, dass das Layout des Grids selbst die Größe des inline-grid-Containers bestimmt, und diese Tendenz ist stärker, wenn flexible Einheiten wie fr, auto und Prozentsätze verwendet werden.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

Flexbox-bezogene CSS-EigenschaftenCSS-Eigenschaften im Zusammenhang mit der Spaltenlayout