Elemente einzeln platzieren

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>HTML5 Flex CSS - Elemente einzeln platzieren</title>
  <style>
    .container {
        display: grid;
        grid-template-columns: 10% 15% auto 15% 10%;
        grid-template-rows: 60px 60px;
        grid-auto-flow: row;
        border: 1px solid grey;
    }
    .item-a {
        grid-column: 1;
        grid-row: 1 / 3;
    }
    .item-b {
        grid-column: 2;
        grid-row:1;
    }
    .item-c {
        grid-column: 3;
        grid-row: 2;
    }
    .item-d {
        grid-column: 4;
        grid-row: 1;
    }
    .item-e {
        grid-column: 5;
        grid-row: 1 / 3;
    }

    div {
        border: 1px solid red;
        text-align: center;
        padding:4px;
    }
  </style>
</head>
<body>
    <section class="container">
      <div class="item-a">A - Inhalt</div>
      <div class="item-b">B - Inhalt</div>
      <div class="item-c">C - Inhalt</div>
      <div class="item-d">D - Inhalt</div>
      <div class="item-e">E - Inhalt</div>
    </section>
</body>
</html>


 

            

Hinweis

Werden die Elemente mit Zahlenwerten im Grid platziert, müssen die Spaltenlinien gezählt werden (nicht die Spalteninhalte).
Es ergiebt sich folgendes Muster:
|1 -2|2 -3|3 -4|4 5|

grid layout

Rows

Die Zeilen innerhalb des Containers. Im Beispiel wurde zwei Zeilen mit je 60px Höhe definiert.

grid-template-rows: 60px 60px;

Columns

Die Spalten innerhalb des Containers. Im Beispiel wurde fünf Spalten mit dynamische Breiten definiert.

grid-template-columns: 10% 15% auto 15% 10%;

Platzieren der Inhalte

Die Inhalte "item-a bis item-e" können über ihre KLasse einzeln angesprochen und im Grid-Container platziert werden.

    .item-a {
        grid-column: 1;
        grid-row: 1 / 3;
    }
    .item-c {
        grid-column: 3;
        grid-row: 2;
    }
    .item-d {
        grid-column: 4;
        grid-row: 1;
    }
    .item-e {
        grid-column: 5;
        grid-row: 1 / 3;
    }

DB-Table: grid-einzeln-platzieren