CSS gap Property

CSS gap Property

This property defines the size of the gap between the rows and columns.

Syntax -

gap: row-gap column-gap;

Now we will see the values with their description-

Value	Description
row-gap	This property sets the size of the gap between the rows in a grid layout
column-gap	This property sets the size of the gap between the columns in a grid layout

Now we will see the example -

Example –

<html>
<head>
<title>Title of the document</title>
<style>
body{
background-color: black;
}
.here {
display: grid;
grid-template-columns: auto auto auto;
gap: 60px;
}
.here>div{
border: 4px solid rgb(152, 206, 241);
border-radius: 50px;
background-color: rgb(111, 248, 221);
}
</style>
</head>
<body>
<div class="Here">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
<div>six</div>
<div>seven</div>
<div>eight</div>
<div>nine</div>
</div>
</body>
</html>

Output -