Depot43-Unterlagen - Grid Grundlage und Idee

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>HTML5 Flex CSS - Grid Grundlage und Idee</title>
  <style>
    .container {
        display:grid;
        grid-template-columns: 20% 60% 20%;
        grid-template-rows: 60px 60px;
        border: 1px solid grey;
        padding:2px;
    }
    div {
        border: 1px solid red;
        text-align: center;
        padding:4px;
    }
  </style>
</head>
<body>
    <section class="container">
      <div>A - <br>20%-Wert</div>
      <div>B - <br>60%-Wert</div>
      <div>C - <br>20%-Wert</div>
      <div>D - <br>20%-Wert</div>
      <div>E - <br>60%-Wert</div>
      <div>F - <br>20%-Wert</div>
    </section>
</body>
</html>


 

            

Hinweis:

CSS Grids arbeiten mit einem Elternelement, in dem das Raster definiert wird und mit darin enthaltenen Kind-Elementen, die im Raster positioniert werden. Dem Elternelement wird mit Hilfe der Angabe

Elternelement: display:grid;
Zeilen innerhalb des Elternelements: grid-template-rows
Spalten innerhalb des Elternelements: grid-template-columns

festgelegt. Damit ist ein CSS-Grid mit "unsichtbaren Tabellenzellen" vergleichbar.

Die 6 Inhalte (div-Elemente, Rot) ordnen sich nun innerhalb der festgelegten 2 Zeilen und je 3 Spalten des Containers (section, Grau) an. Die beiden Zeilen werden mit jeweils 100% der Breitenangabe ausgefüllt.

    .container {
        display:grid;
        grid-template-columns: 20% 60% 20%;
        grid-template-rows: 60px 60px;
    }
    div {
        /*. . .*/
    }