top of page

Row-Gap Property

The row-gap property specifies the gap between the grid rows. The row-gap property was formerly known as grid-row-gap.


Syntax:

row-gap: length | normal | initial | inherit;

Where,

  • length: A specified length or % that will set the gap between the rows

  • normal: Default value. Specifies a normal gap between the rows

  • Initial: Sets this property to its default value.

  • Inherit: Inherits this property from its parent element.


Example:

<!DOCTYPE html>
<html>
<head>
<style> 
.grid-container {
  display: grid;
  row-gap: 20px;
}
.grid-container > div {
  border: 1px solid black;
  background-color: pink;
}
</style>
</head>
<body>

<h2>Row-Gap Property</h2>
<p>The row-gap property defines the gap between the grid rows:</p>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
</div>

</body>
</html>

Output:




The Tech Platform

0 comments

Comments


bottom of page