Das CSS-Grid-Layout-Modul bietet ein rasterbasiertes Layoutsystem mit Zeilen und Spalten, das das Entwerfen von Webseiten erleichtert, ohne Floats und Positionierungen verwenden zu müssen:
Probieren Sie es selbst aus →
<!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>The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning:</p>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>
</body>
</html>
Ein Rasterlayout muss ein übergeordnetes Element haben, dessen Eigenschaft display auf grid gesetzt ist.
Direkte untergeordnete Elemente des Rastercontainers werden automatisch zu Rasterelementen.
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
.item1 {
grid-row: 1;
grid-column: 1;
}
.item2 {
grid-row: 1;
grid-column: 2;
}
.item3 {
grid-row: 1;
grid-column: 3;
}
.item4 {
grid-row: 2;
grid-column: 1;
}
.item5 {
grid-row: 2;
grid-column: 2;
}
.item6 {
grid-row: 2;
grid-column: 3;
}
.item7 {
grid-row: 3;
grid-column: 1 / span 3;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">1</div>
<div class="grid-item item2">2</div>
<div class="grid-item item3">3</div>
<div class="grid-item item4">4</div>
<div class="grid-item item5">5</div>
<div class="grid-item item6">6</div>
<div class="grid-item item7">7</div>
</div>
<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em>.</p>
<p>Direct child elements(s) of the grid container automatically becomes grid items.</p>
</body>
</html>
Das CSS-Grid-Layout-Modul bietet ein rasterbasiertes Layoutsystem mit Zeilen und Spalten, das die Gestaltung von Webseiten erleichtert, ohne Floats und Positionierungen verwenden zu müssen.
Die Rastereigenschaften werden in allen modernen Browsern unterstützt.
57.0 | 16.0 | 52.0 | 10 | 44 |
Ein Rasterlayout besteht aus einem übergeordneten Element und einem oder mehreren untergeordneten Elementen.
<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>
Probieren Sie es selbst aus →
<!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>Grid Elements</h1>
<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>
<p>Direct child element(s) of the grid container automatically becomes grid items.</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>
Ein HTML-Element wird zu einem Rastercontainer, wenn seine display
-Eigenschaft vorhanden ist ist eingestellt auf grid
oder inline-grid
.
.grid-container {
display: grid;
}
Probieren Sie es selbst aus →
<!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>Use display: grid; to make a block-level grid container:</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: inline-grid;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: inline-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: inline-grid</h1>
<p>Use display: inline-grid; to make an inline grid container:</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>
Alle direkten untergeordneten Elemente des Grid-Containers werden automatisch zu Grid-Elementen.
Die vertikalen Linien von Rasterelementen werden Spalten genannt.
Die horizontalen Linien von Rasterelementen werden Zeilen genannt.
Die Abstände zwischen den einzelnen Spalten/Zeilen werden als Lücken bezeichnet.
Sie können die Lückengröße anpassen, indem Sie eine der folgenden Eigenschaften verwenden:
column-gap
row-gap
gap
Die Eigenschaft column-gap
legt die Lücke zwischen den Spalten fest:
.grid-container {
display: grid;
column-gap: 50px;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
column-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>The column-gap Property</h1>
<p>Use the <em>column-gap</em> property to adjust the space between the columns:</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>
Die Eigenschaft row-gap
legt den Abstand zwischen den Zeilen fest:
.grid-container {
display: grid;
row-gap: 50px;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
row-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>The row-gap Property</h1>
<p>Use the <em>row-gap</em> property to adjust the space between the rows:</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>
Die Eigenschaft gap
ist eine Abkürzung für die Eigenschaft row-gap
und die column-gap
-Eigenschaften:
.grid-container {
display: grid;
gap: 50px 100px;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
gap: 50px 100px;
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>The gap Property</h1>
<p>Use the <em>gap</em> shorthand property to adjust the space between the columns and rows.</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>
Die Eigenschaft gap
kann auch verwendet werden, um sowohl den Zeilenabstand als auch den festzulegen Spaltenlücke in einem Wert:
.grid-container {
display: grid;
gap: 50px;
}
Probieren Sie es selbst aus →
<!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>The gap Property:</h1>
<p>Use the <em>gap</em> shorthand property to adjust the space between the columns and rows:</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>
Die Linien zwischen den Spalten werden Spaltenlinien genannt.
Die Linien zwischen den Zeilen werden Zeilenlinien genannt.
Beachten Sie die Zeilennummern, wenn Sie ein Rasterelement in einem Rastercontainer platzieren:
Platzieren Sie ein Rasterelement in Spaltenzeile 1 und lassen Sie es in Spaltenzeile 3 enden:
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
Probieren Sie es selbst aus →
<!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>You can refer to line numbers when placing grid items.</p>
</body>
</html>
Platzieren Sie ein Rasterelement an Zeilenlinie 1 und lassen Sie es an Zeilenlinie 3 enden:
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
Probieren Sie es selbst aus →
<!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-row-start: 1;
grid-row-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>You can refer to line numbers when placing grid items.</p>
</body>
</html>
Gibt die Lücke zwischen den Spalten an
Eine Abkürzungseigenschaft für die Eigenschaften row-gap und column-gap
Eine Abkürzungseigenschaft für die grid-template-rows, Grid-Template-Spalten, Grid-Template-Bereiche, Grid-Auto-Zeilen, Grid-Auto-Columns und die Grid-Auto-Flow-Eigenschaften
Gibt entweder einen Namen für das Rasterelement an, oder diese Eigenschaft ist eine Abkürzungseigenschaft für grid-row-start, grid-column-start, grid-row -end und grid-column-end Eigenschaften
Gibt eine Standardspaltengröße an
Gibt an, wie automatisch platzierte Elemente in das Raster eingefügt werden
Gibt eine Standardzeilengröße an
Eine Abkürzungseigenschaft für die Eigenschaften grid-column-start und grid-column-end
Gibt an, wo das Rasterelement enden soll
Gibt die Größe der Lücke zwischen den Spalten an
Gibt an, wo das Rasterelement beginnen soll
Eine Abkürzungseigenschaft für die Eigenschaften grid-row-gap und grid-column-gap
Eine Abkürzungseigenschaft für die Eigenschaften grid-row-start und grid-row-end
Gibt an, wo das Rasterelement enden soll
Gibt die Größe der Lücke zwischen den Zeilen an
Gibt an, wo das Rasterelement beginnen soll
Eine Abkürzungseigenschaft für die grid-template-rows, grid-template-columns und grid-areas-Eigenschaften
Gibt an, wie Spalten und Zeilen mithilfe benannter Rasterelemente angezeigt werden
Gibt die Größe der Spalten und die Anzahl der Spalten in einem Rasterlayout an
Gibt die Größe der Zeilen in einem Rasterlayout an
Gibt den Abstand zwischen den Rasterzeilen an