GRID CSS Layout_12191695

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Latihan Membuat Grid</title>
    <style>
      .wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;
        grid-auto-rows: minmax(100px, auto);
      }

      .satu {
        border-style: solid;
        background-color: #ff6347;
        grid-column: 1 / 2;
        grid-row: 1;
      }

      .dua {
        border-style: solid;
        grid-column: 2 / 4;
        grid-row: 1 / 3;
      }

      .tiga {
        border-style: solid;
        grid-column: 1;
        grid-row: 2 / 5;
      }

      .empat {
        border-style: solid;
        grid-column: 3;
        grid-row: 3;
      }

      .lima {
        border-style: solid;
        grid-column: 2;
        grid-row: 4;
      }

      .enam {
        border-style: solid;
        grid-column: 3;
        grid-row: 4;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="satu">1</div>
      <div class="dua">2</div>
      <div class="tiga">3</div>
      <div class="empat">4</div>
      <div class="lima">5</div>
      <div class="enam">6</div>
    </div>
  </body>
</html>