Flexbox problem

Support
16

I was trying to figure out how to more granually place my elements on the page, like the picture under the first set of text, so I tried going and doing something that seemed basic to test out and learn to do it, but it seems none of the css is working, just the html, what am I missing?

<!DOCTYPE html>
<html lang="en">


<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css`Preformatted text`grid</title>

<style>

 
.grid-container {
    display: grid;
    grid-template-rows: 100px 100px 100px 100px 100px 100px 100px;
    grid-template-columns: 100px 100px 100px 100px 100px 100px 100px;
}

.grid-item {
border-top: 1px solid #dfdfdf;
}

.item-1 {
background-color: red;
grid-row 1 / 2;
grid-column 1/4;
}

.item-2 {
background-color: yellow;
grid-row 3/ 4;
grid-column 1/4;
}

.item-3 {
background-color: blue;
grid-row 5 / 6;
grid-column 1/4;
}

</style> 
</head>
<body>
<div class="grid-container">
<div class="grid-item item-1">1 and a bunch of other words that probably do not really matter to anyone in the world.</div>
<div class="grid-item item-2">2 and a bunch of other words that probably do not really matter to anyone in the world</div>
<div class="grid-item item-3">3 and a bunch of other words that probably do not really matter to anyone in the world</div>
</body>
</html>