CSS-Rasterelement

Inhaltsverzeichnis

Inhaltsverzeichnis anzeigen

Direkte untergeordnete Elemente des Rastercontainers werden automatisch zu Rasterelementen.

Die Elemente 1, 2 und 5 sind so eingestellt, dass sie sich über mehrere Spalten oder Zeilen erstrecken.

1

2

3

4

5

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-column: 1 / span 2;
  grid-row: 1;
}

.item2 {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.item5 {
  grid-column: 1 / span 3;
  grid-row: 3;
}
</style>
</head>
<body>

<h1>A Five Items Grid Layout</h1>

<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>

<p>Direct child elements(s) of the grid container automatically becomes grid items.</p>

<p>Item 1, 2, and 5 are set to span multiple columns or rows.</p>

</body>
</html>

Untergeordnete Elemente (Elemente)

Ein Raster-Container enthält Raster-Elemente.

Standardmäßig verfügt ein Container über ein Rasterelement für jede Spalte und jede Zeile. Sie können die Rasterelemente jedoch so gestalten, dass sie sich über mehrere Spalten und/oder Zeilen erstrecken.

Die Eigenschaft „grid-column“:

Die Eigenschaft grid-column definiert welche Spalte(n), um ein Element zu platzieren.

Sie legen fest, wo das Element beginnt und wo es endet.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

Hinweis: Die Eigenschaft grid-column ist eine Abkürzung für die Eigenschaft die Eigenschaften grid-column-start und grid-column-end.

Um ein Element zu platzieren, können Sie sich auf Zeilennummern beziehen oder das Schlüsselwort „span“ verwenden Definieren Sie, wie viele Spalten das Element umfassen soll.

Beispiel

Lassen Sie „item1“ in Spalte 1 beginnen und vor Spalte 5 enden:

 .item1 {
    
  grid-column: 1 / 5;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto 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: 1 / 5;
}
</style>
</head>
<body>

<h1>The grid-column Property</h1>

<p>Use the <em>grid-column</em> property to specify where to place an item.</p>
<p>Item1 will start on column 1 and end before column 5:</p>

<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 class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
</div>

</body>
</html>

Beispiel

Lassen Sie „item1“ in Spalte 1 beginnen und sich über 3 Spalten erstrecken:

 .item1 {
    
  grid-column: 1 / span 3;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto 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: 1 / span 3;
}
</style>
</head>
<body>

<h1>The grid-column Property</h1>

<p>Use the <em>grid-column</em> property to specify where to place an item.</p>
<p>Item1 will start on column-line 1 and span 3 columns:</p>

<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 class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
  <div class="item16">16</div>
</div>

</body>
</html>

Beispiel

Lassen Sie „item2“ in Spalte 2 beginnen und sich über 3 Spalten erstrecken:

 .item2 {
    
  grid-column: 2 / span 3;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto 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;
}

.item2 {
  grid-column: 2 / span 3;
}
</style>
</head>
<body>

<h1>The grid-column Property</h1>

<p>Use the <em>grid-column</em> property to specify where to place an item.</p>
<p>Item2 will start on column line 2 and span 3 columns:</p>

<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 class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
  <div class="item16">16</div>
</div>

</body>
</html>

Die Eigenschaft „grid-row“:

Die Eigenschaft grid-row definiert, in welche Zeile verschoben werden soll einen Gegenstand platzieren.

Sie legen fest, wo das Element beginnt und wo es endet.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

Hinweis: Die Eigenschaft grid-row ist eine Abkürzungseigenschaft für die Eigenschaften grid-row-start und grid-row-end.

Um ein Element zu platzieren, können Sie sich auf Zeilennummern beziehen oder das Schlüsselwort „span“ verwenden Definieren Sie, wie viele Zeilen das Element umfassen soll:

Beispiel

Lassen Sie „item1“ in Zeilenzeile 1 beginnen und in Zeilenzeile 4 enden:

 .item1 {
    
  grid-row: 1 / 4;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto 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: 1 / 4;
}
</style>
</head>
<body>

<h1>The grid-row Property</h1>

<p>Use the <em>grid-row</em> property to specify where to place an item.</p>
<p>Item1 will start on row-line 1 and end on row-line 4:</p>

<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 class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
  <div class="item16">16</div>
</div>

</body>
</html>

Beispiel

Lassen Sie „item1“ in Zeile 1 beginnen und sich über 2 Zeilen erstrecken:

 .item1 {
    
  grid-row: 1 / span 2;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto 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: 1 / span 2;
}
</style>
</head>
<body>

<h1>The grid-row Property</h1>

<p>Use the <em>grid-row</em> property to specify where to place an item.</p>
<p>Item1 will start on row 1 and span 2 rows:</p>

<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 class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
  <div class="item16">16</div>
  <div class="item17">17</div>
</div>

</body>
</html>

Die Grid-Area-Eigenschaft

Die Eigenschaft grid-area kann als Abkürzungseigenschaft für die Eigenschaften verwendet werden:

grid-row-start
grid-column-start
grid-row-end
grid-column-end

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

Beispiel

Lassen Sie „item8“ in Zeilenzeile 1 und Spaltenzeile 2 beginnen und in Zeilenzeile 5 und Spaltenzeile 6 enden:

 .item8 {
    
  grid-area: 1 / 2 / 5 / 6;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto 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;
}

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}
</style>
</head>
<body>

<h1>The grid-area Property</h1>

<p>You can use the <em>grid-area</em> property to specify where to place an item.</p>

<p>The syntax is:</p>
<p>grid-row-start / grid-column-start / grid-row-end / grid-column-end.</p>

<p>Item8 will start on row-line 1 and column-line 2, and end on row-line 5 column-line 6:</p>

<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 class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
</div>

</body>
</html>

Beispiel

Lassen Sie „item8“ auf Zeilenzeile 2 und Spaltenzeile 1 beginnen und sich über 2 Zeilen und 3 Spalten erstrecken:

 .item8 {
    
  grid-area: 2 / 1 / span 2 / span 3;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto 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;
}

.item8 {
  grid-area: 2 / 1 / span 2 / span 3;
}
</style>
</head>
<body>

<h1>The grid-area Property</h1>

<p>You can use the <em>grid-area</em> property to specify where to place an item.</p>

<p>The syntax is grid-row-start / grid-column-start / grid-row-end / grid-column-end.</p>

<p>Item8 will start on row-line 2 and column-line 1, and span 2 rows and 3 columns:</p>

<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 class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
</div>

</body>
</html>

Benennen von Rasterelementen

Die Eigenschaft grid-area kann auch verwendet werden, um Rasterelementen Namen zuzuweisen.

Header

Main

Right

Footer

Auf benannte Rasterelemente kann über die Eigenschaft grid-template-areas des Rastercontainers verwiesen werden.

Beispiel

Element1 erhält den Namen „myArea“ und erstreckt sich über alle fünf Spalten in einem fünfspaltigen Rasterlayout:

 .item1 {
  grid-area: 
  myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea 
  myArea myArea myArea';
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea myArea myArea myArea';
  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>The grid-area Property</h1>

<p>You can use the <em>grid-area</em> property to name grid items.</p>

<p>You can refer to the name when you set up the grid layout, by using the <em>grid-template-areas</em> property on the grid container.</p>

<p>Item1, is called "myArea" and will take up the place of all five columns:</p>

<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>

</body>
</html>

Jede Zeile wird durch Apostrophe ('') definiert.

Die Spalten in jeder Zeile werden innerhalb der Apostrophe definiert und durch ein a getrennt Raum.

Hinweis: Ein Punktzeichen stellt ein Rasterelement ohne Namen dar.

Beispiel

Lassen Sie „myArea“ zwei Spalten in einem fünfspaltigen Rasterlayout umfassen (Punktzeichen). stellen Elemente ohne Namen dar):

 .item1 {
  grid-area: 
  myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea 
  . . .';
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea . . .';
  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>The grid-area Property</h1>

<p>You can use the <em>grid-area</em> property to name grid items.</p>

<p>You can refer to the name when you set up the grid layout, by using the <em>grid-template-areas</em> property on the grid container.</p>

<p>Item1, is called "myArea" and will take up the place of two columns (out of five):</p>

<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 class="item9">9</div>
</div>

</body>
</html>

Um zwei Zeilen zu definieren, definieren Sie die Spalte der zweiten Zeile innerhalb eines weiteren Satzes von Apostrophen:

Beispiel

Sorgen Sie dafür, dass sich „item1“ über zwei Spalten und zwei Zeilen erstreckt:

 .grid-container {
  grid-template-areas: 'myArea myArea 
  . . .' 'myArea myArea . . .';
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
  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>The grid-area Property</h1>

<p>You can use the <em>grid-area</em> property to name grid items.</p>

<p>You can refer to the name when you set up the grid layout, by using the <em>grid-template-areas</em> property on the grid container.</p>

<p>Item1, is called "myArea" and will take up the place of two columns (out of five), and will span two rows:</p>

<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>

</body>
</html>

Beispiel

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: right; }
.item5 { grid-area: 
  footer; }
.grid-container {
  grid-template-areas:
    
  'header header header header header header'
    'menu main 
  main main right right'
    'menu footer footer footer footer 
  footer';
}

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>The grid-area Property</h1>

<p>You can use the <em>grid-area</em> property to name grid items.</p>

<p>You can refer to the name when you set up the grid layout, by using the <em>grid-template-areas</em> property on the grid container.</p>

<p>This grid layout contains six columns and three rows:</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>

Die Reihenfolge der Artikel

Das Rasterlayout ermöglicht es uns, die Elemente an einer beliebigen Stelle zu positionieren.

Das erste Element im HTML-Code muss nicht als erstes Element im Raster erscheinen.

1

2

3

4

5

6

Beispiel

 .item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
  .item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
  .item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 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-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
</style>
</head>
<body>

<h1>Sort the Items</h1>

<p>The grid items do not have to be displayed in the same order as they are written in the HTML code.</p>

<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>

</body>
</html>

Sie können die Reihenfolge für bestimmte Bildschirmgrößen mithilfe von Medienabfragen neu anordnen:

Beispiel

 @media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / 
  span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / 
  span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 4 / 2; }
  .item6 
  { grid-area: 2 / 3 / 3 / 4; }
}

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;
}

@media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 4 / 2; }
  .item6 { grid-area: 2 / 3 / 3 / 4; }
}
</style>
</head>
<body>

<h1>Re-arange the Order on Small Devices</h1>

<p>Resize the window to 500 pixels see the effect.</p>

<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>

</body>
</html>