CSS Grid Layout - Grid Lines Example

<!DOCTYPE html>
<html>
<head>
<style>
/*
============== Grid Lines ==============
*/
.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 10px;
    background: #333;
}

.grid-item {
    position: relative;
    background: #97ff99;
    text-align: center;
    border: 1px solid #333;
    padding: 10px;  
    height: 50px;
    line-height: 50px;
}

.grid-container .grid-item:first-child {
	grid-column-start: 1;
    grid-column-end: 4;    /* Modify to see results */
    background: #bdd8f5;
}
.grid-container .grid-item:nth-child(2) {
	grid-row-start: 3; 
    background: #bdd8f5;
}
/*
============== Grid Lines ==============
*/
</style>
</head>
<body>
<h1 class="heading">Grid Lines</h1>

<p class="description">We can use the grid-lines of the grid container to place the items accordingly, and for this purpose we can use <strong>grid-row-start</strong>, <strong>grid-row-end</strong>, <strong>grid-column-start</strong>, and <strong>grid-row-end</strong> properties.</p>

<div class="grid-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 class="grid-item">7</div>
</div>

</body>
</html>