CSS gap Property
Last Updated :
26 Aug, 2022
The gap property of CSS is used to set the spacing also caller gutter between the rows and columns. As like column-gap and row-gap using separately both so that one can use simply gap property that can given column as well as row gap.
Syntax:
gap: <row-gap> <column-gap>
Property values:
- <length>: The spacing is given in terms of length unit i.e. rm, px etc. For example: gap: 10px 20px
- <percentage>: The spacing is given in terms of percentage unit. For example: gap: 50%
Example 1: In this example, spacing is set in terms of length.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
.row {
display: grid;
width: 500px;
gap: 20px 50px;
}
.col {
background-color: green;
border: 1px solid black;
color: #fff;
width: fit-content;
height: 20px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="row">
<div class="col">
geeksforgeeks
</div>
<div class="col">
geeksforgeeks
</div>
<div class="col">
geeksforgeeks
</div>
</div>
<div class="row">
<div class="col">
geeksforgeeks
</div>
<div class="col">
geeksforgeeks
</div>
<div class="col">
geeksforgeeks
</div>
</div>
</body>
</html>
|
Output:
Example: In this example, spacing is set in terms of percentage.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
.row {
display: grid;
width: fit-content;
gap: 20%;
height: 100px;
background-color: greenyellow;
}
.col {
background-color: green;
border: 1px solid black;
color: #fff;
width: fit-content;
font-size: 20px;
}
</style>
</head>
<body>
<p>In terms of percentage</p>
<div class="row">
<div class="col">
geeksforgeeks
</div>
<div class="col">
geeksforgeeks
</div>
<div class="col">
geeksforgeeks
</div>
</div>
<br><br><br>
<div class="row">
<div class="col">
geeksforgeeks
</div>
<div class="col">
geeksforgeeks
</div>
<div class="col">
geeksforgeeks
</div>
</div>
</body>
</html>
|
Output:
Supported Browsers:
- Chrome 57+
- Edge 16+
- Firefox 52+
- Opera 44+
- Safari 10.1+
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...