12181632_Latihan Grid

<!DOCTYPE html>
<html>
<head>
<title>Latihan Grid_12181632</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>