CSS-Grid/6-Grid-Alignment/place-items.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Alignment | Place Items</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 80%;
            margin: auto;
            display: grid;
            grid-template-rows: 130px 130px 130px;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 5px;
            place-items: center end ;
        }
        .items {
        border: 3px solid black;
        width: 150px;
        background-color: lightblue;
        } 

        .items.i1,
        .items.i4,
        .items.i7 {
            height: 100px;
        }

        .items.i2,
        .items.i5,
        .items.i8 {
            height: 50px;
        }

        .items.i3,
        .items.i6,
        .items.i9 {
            height: 80px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="items i1">1</div>
        <div class="items i2">2</div>
        <div class="items i3">3</div>
        <div class="items i4">4</div>
        <div class="items i5">5</div>
        <div class="items i6">6</div>
        <div class="items i7">7</div>
        <div class="items i8">8</div>
        <div class="items i9">9</div>
      </div>
</body>
</html>