Werte - Pixel/Prozent/Auto

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>HTML5 Flex CSS - Werte - Pixel/Prozent/Auto</title>
  <style>
    .container {
        display:grid;
        border:1px solid grey;
        grid-template-columns: 60px 20% auto 20% 60px;
    }
    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

HTML-Elemente

Die HTMLelemente (div) werden innerhalb des Grid-Containers platziert.

CSS-Eigenschaften

Jede HTML-Position muss eine Angabe in "grid-template-columns" haben:

grid-template-columns: 60px 20% auto 20% 60px

Jedes HTML-Element muss einen Eintrag als "column" haben:

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

DB-Table: grid-werte