Depot43-Unterlagen

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>HTML5 Flex CSS - Grid Gap</title>
  <style>
    .container {
        display:grid;
        border:1px solid grey;
        grid-template-columns: 60px 20% auto 20% 60px;
        grid-template-rows: auto;
        grid-column-gap: 10px;
        grid-row-gap: 15px;

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


 

            

Hinweis

Der Abstand zwischen den einzelnen Elementen kann für "columns" und "rows" genutzt werden:

  grid-row-gap: 20px;

  grid-column-gap: 10px;

Kurzschreibweise:

grid-gap: 20px 10px;