CSS grid-column Property

You can override the default grid positioning and specify specific grid row and column indices for grid items using the grid-column.

A grid item can be made to span multiple columns by using the grid-column-start, and grid-column-end.

grid-column properties can also be used as a shorthand for these properties.

Syntax -

grid-column: grid-column-start / grid-column-end;

Now we will see the example -

Example -

<html>
<head>
<title>Title of the document</title>
<style>

.Here {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
grid-auto-flow: row;
}
.here>div{
border: 4px solid rgb(99, 45, 135);
border-radius: 50px;
background-color: rgb(234, 199, 59);
}

.one{
grid-column: 1 / span 2;
}
.four{
grid-column: 2 / span 2;

}
.eight{
grid-column: 1 / span 2;

}

</style>
</head>
<body>
<div class="Here">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
<div class="five">five</div>
<div class="six">six</div>
<div class="seven">seven</div>
<div class="eight">eight</div>
<div class="nine">nine</div>
</div>

</body>
</html>

Output -