<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header;
}
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 {
grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header
header'
'menu main main main right right'
'menu footer footer footer
footer footer';
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Grid Layout</h1>
<p>Dieses Grid-Layout besteht aus sechs Spalten und drei Reiehen</p>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div
class="item3">Main</div>
<div class="item4">Aside</div>
<div
class="item5">Footer</div>
</div>
</body>
</html>
CSS: das Grid-Layout
| Header | ||
| Menu | Main | Aside |
| Footer | ||
Auf die verwendeten Grid-Befehle wird später eingegenagen.
Das CSS-Grid-Layout-Modul bietet ein rasterbasiertes Layoutsystem mit Zeilen und Spalten, das das Entwerfen von Webseiten erleichtert, ohne Floats und Positionierung verwenden zu müssen.Ein Grid-Layout besteht aus einem übergeordneten Element mit einem oder mehreren untergeordneten Elementen. Ein HTML-Element wird zu einem Grid-Container, wenn seine Anzeigeeigenschaft auf grid oder inline-grid gesetzt ist. Das Grid besteht aus Spalten (columns), Zeilen (rows) und Zwischenräumen (column-gap, row-gap, gaps).
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color:
#2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px
solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size:
30px;
text-align: center;
}
</style>
</head>
<body>
<h1>Display: grid</h1>
<p>Benutzen Sie display:
grid;, um einen Container auf Blockebene zu erstellen </p>
<div
class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div
class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div
class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div
class="grid-item">9</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
gap: 50px;
grid-template-columns: auto auto auto;
background-color:
#2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px
solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size:
30px;
text-align: center;
}
</style>
</head>
<body>
<h1>Die Gap Eigenschaft:</h1>
<p>Verwenden
Sie die Eigenschaft gap, um den Abstand zwischen den Spalten
und Zeilen anzupassen:</p>
<div
class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div
class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div
class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div
class="grid-item">9</div>
</div>
</body>
</html>
.grid-container {
display: grid;
column-gap: 50px;
}
.grid-container {
display: grid;
row-gap:
50px;
}
.grid-container {
display: grid;
gap: 50px 100px;
/*gap: 50px; alternative
Darstellung, wenn Werte gleich sind '/
}
Die Gap-Eigenschaft ist eine
Kurznotierung für die Row-Gap- und die
Column-Gap-Eigenschaft.
Die Linien zwischen den Spalten werden als colomn lines, die Linien zwischen den Zeilen werden row lines bezeichnet. Gezählt wird von links nach rechts bzw. non oben nach unten. Begonnen wird mit 1. Dies ist die Linie links neben der ersten Spalte bzw. die Linie oberhalb der ersten Zeile.
Platzieren Sie ein Rasterelement, dass bei Spaltenlinie 1 beginnt und bei Spaltenline 3 endet. Es zeiht sich also über zwei Spalten hin.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255,
255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-column-start:
1;
grid-column-end: 3;
}
</style>
</head>
<body>
<h1>Grid Lines</h1>
<div
class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
<p>Beim
Platzieren von Rasterelementen können Sie sich auf
Zeilennummern beziehen.</p>
</body>
</html>
In der folgenden Tabelle sind alle Grid-Eigenschaften aufgelistet:
| Eigenschaft | Beschreibung |
|---|---|
| column-gap | Gibt den Abstand zwischen den Spalten an |
| gap | Eine abgekürzte Eigenschaft für die Row-Gap- und die Column-Gap-Eigenschaft |
| grid | Eine abgekürzte Eigenschaft für die Eigenschaften grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns und die grid-auto-flow Eigenschaften |
| grid-area | Gibt entweder einen Namen für das Rasterelement an, oder diese Eigenschaft ist eine Kurzformeigenschaft für die Eigenschaften grid-row-start, grid-column-start, grid-row-end und grid-column-end |
| grid-auto-columns | Gibt eine Standardspaltengröße an |
| grid-auto-flow | Gibt an, wie automatisch platzierte Elemente in das Raster eingefügt werden |
| grid-auto-rowa | Gibt eine Standardzeilengröße an |
| grid-column | Eine abgekürzte Eigenschaft für die Eigenschaften grid-column-start und grid-column-end |
| grid-column-end | Gibt an, wo das Grid-Element enden soll |
| grid-column-gap | Gibt die Größe des Abstands zwischen Spalten an |
| grid-column-start | Gibt an, wo das Grid-Element beginnen soll |
| grid-gap | Eine abgekürzte Eigenschaft für die Eigenschaften grid-row-gap und grid-column-gap |
| grid-row | Eine abgekürzte Eigenschaft für die Eigenschaften grid-row-start und grid-row-end |
| grid-row-end | Gibt an, wo das Rasterelement enden soll |
| grid-row-gap | Gibt die Größe des Abstands zwischen Zeilen an |
| grid-row-start | Gibt an, wo das Grid-Element beginnen soll |
| grid-template | Eine abgekürzte Eigenschaft für die Eigenschaften grid-template-rows, grid-template-columns und grid-areas |
| grid-template-areas | Gibt an, wie Spalten und Zeilen angezeigt werden, indem benannte Rasterelemente verwendet werden |
| grid-template-columns | Gibt die Größe der Spalten und die Anzahl der Spalten in einem Rasterlayout an |
| grid-template-rows | Gibt die Größe der Zeilen in einem Rasterlayout an |
| row-gap | Gibt den Abstand zwischen den Rasterzeilen an |
| column-count | Gibt die Spaltenanzahl an, in die ein Element aufgeteilt wird |
Grid-template-columns:
Diese Eigenschaft definiert die Anzahl der Spalten im Grid-Layout. Man kann definierte Breiten angeben oder auto, wenn alle Spalten gleich breit sein sollen.
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
Grid-template-rows:
Diese Eigenschaft defineirt die Höhe jeder Zeile. Für vier Zeilen können vier verschiedene Werte angegeben werden. Die Verwendung dieser Eigenschaft ist nicht notwenig.
.grid-container {
display: grid;
grid-template-rows: 80px 200px 60px 100px;
}
Grid-column:
Die grid-column-Eigenschaft definiert, in welcher(n) Spalte(n) ein Element platziert werden soll. Sie definiert, wo das Element beginnt und wo das Element endet. Im folgendenn Beispiel startet "item1" in Spalte 1 und endet vor Spalte 5, es werden also die Spalten 1-4 belegt.
.item1 {
grid-column: 1 / 5;
}
Row-column:
Die row-column-Eigenschaft definiert, in welcher(n) Zeile(n) ein Element platziert werden soll. Sie definiert, wo das Element beginnt und wo das Element endet. Im folgendenn Beispiel startet "item2" in Zeile 2 und endet vor Zeile 4, es werden also die Zeilen 2 und 3 belegt.
.item2 {
grid-row: 2 / 4;
}
Grid-area:
Die Eigenschaft grid-area kann als Kurzform für die Eigenschaften grid-row-start, grid-column-start, grid-row-end und grid-column-end verwendet werden. "item8" beginnt bei Zeile 1 und Spalte 2 und umschließt Zeile 4 und Spalte 5
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
Grid-template-areas:
Man kann die Grid-area eines Items auch mit einem Namen verbinden, der dann über grid-template-areas mit dem Container verbunden werden. Benennen Sie alle Elemente und erstellen Sie eine gebrauchsfertige Webseitenvorlage.
.item1 { grid-area: header; }
.item2 { grid-area:
menu; }
.item3 { grid-area: main; }
.item4 {
grid-area: aside; }
.item5 { grid-area: footer; }
.grid-container {
grid-template-areas:
'header header
header header header header'
'menu main main main aside
aside'
'menu footer footer footer footer footer';
}
Der Container besteht aus sechs Spalten und drei Zeilen.
<!DOCTYPE html>
<html>
<head>
<style>
.item1
{ grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: aside; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header
header header header header'
'menu main main main aside
aside'
'menu footer footer footer footer footer';
gap:
10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255,
255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Die grid-area Eigenschaft</h1>
<div
class="grid-container">
<div class="item1">Kopfteil</div>
<div class="item2">Navigation</div>
<div
class="item3">Hauptteil</div>
<div
class="item4">Anmerkungen</div>
<div
class="item5">Fußteil</div>
</div>
</body>
</html>
