grid-column and grid-row

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css-place-grid-items-on-a-grid-using-grid-column-and-grid-row</title>
    <style>
        .grid-item {
            background-color: cadetblue;
        }

        .container {
            display: grid;
            grid-gap: 15px;
            height: 100vh;
            grid-template-columns: 100px 200px auto auto;
        }

        .grid-item:nth-of-type(2) {
            grid-row: span 2;
            /* the same as
            grid-row-start: 2;
            */
        }

        .grid-item:nth-of-type(6) {
            grid-column: 3 / span 2;
            /* the same as
            grid-column-start: 3;
            grid-column-end 5
            */
        }
    </style>
</head>
<body>
<div class="container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
</div>
</body>
</html>

// Code goes here

/* Styles go here */