The grid-row-start property in CSS is used to define the grid items’ start position within the grid row by specifying the inline start edge of its grid area.
Syntax:
grid-row-start: auto|span|row-line|initial|inherit;
Default value: auto
Property Values:
- auto: It sets the grid-row-start property to its default value of one row.
- span: It specifies the number of rows the item will span.
- integer(row-line): It specifies the row on which the item starts.
- initial: It sets the grid-row-start property to its default value.
- inherit: The grid-row-start property is inherited from its parent.
Note: Don’t initialize the height and width of the items of the container explicitly. If initialized, the span effect can’t be observed.
Example 1: This example describes the container items without the grid-row-start property.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-row-start Property
</title>
<style>
.main {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 20px;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
padding: 20px 0;
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">1</div>
<div class="GFG">2</div>
<div class="GFG">3</div>
<div class="GFG">4</div>
<div class="GFG">5</div>
</div>
</body>
</html>
|
Output:
Example 2: This example describes the grid-row-start property to auto.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-row-start Property
</title>
<style>
.main {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 20px;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
padding: 20px 0;
}
.Geeks3 {
grid-row-start: auto;
}
</style>
</head>
<body>
<div class="main">
<div class="Geeks1 GFG">1</div>
<div class="Geeks2 GFG">2</div>
<div class="Geeks3 GFG">3</div>
<div class="Geeks4 GFG">4</div>
<div class="Geeks5 GFG">5</div>
</div>
</body>
</html>
|
Output:
Example 3: This example describes the grid-row-start property to span.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-row-start Property
</title>
<style>
.main {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 20px;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
padding: 20px 0;
}
.Geeks3 {
grid-row-start: span 2;
}
</style>
</head>
<body>
<div class="main">
<div class="Geeks1 GFG">1</div>
<div class="Geeks2 GFG">2</div>
<div class="Geeks3 GFG">3</div>
<div class="Geeks4 GFG">4</div>
<div class="Geeks5 GFG">5</div>
</div>
</body>
</html>
|
Output:
Example 4: This example describes the grid-row-start property to the row line.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-row-start Property
</title>
<style>
.main {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 20px;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
padding: 20px 0;
}
.Geeks3 {
grid-row-start: 2;
}
</style>
</head>
<body>
<div class="main">
<div class="Geeks1 GFG">1</div>
<div class="Geeks2 GFG">2</div>
<div class="Geeks3 GFG">3</div>
<div class="Geeks4 GFG">4</div>
<div class="Geeks5 GFG">5</div>
</div>
</body>
</html>
|
Output:
Example 5: This example describes the grid-row-start property to initial.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-row-start Property
</title>
<style>
.main {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 20px;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
padding: 20px 0;
}
.Geeks3 {
grid-row-start: initial;
}
</style>
</head>
<body>
<div class="main">
<div class="Geeks1 GFG">1</div>
<div class="Geeks2 GFG">2</div>
<div class="Geeks3 GFG">3</div>
<div class="Geeks4 GFG">4</div>
<div class="Geeks5 GFG">5</div>
</div>
</body>
</html>
|
Output:
Example 6: This example describes the grid-row-start property to inherit.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-row-start Property
</title>
<style>
.main {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 20px;
padding: 30px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 35px;
background-color: white;
padding: 20px 0;
}
.Geeks3 {
grid-row-start: inherit;
}
</style>
</head>
<body>
<div class="main">
<div class="Geeks1 GFG">1</div>
<div class="Geeks2 GFG">2</div>
<div class="Geeks3 GFG">3</div>
<div class="Geeks4 GFG">4</div>
<div class="Geeks5 GFG">5</div>
</div>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by the grid-row-start property are listed below
- Google Chrome 57.0
- Edge 16.0
- Firefox 52.0
- Safari 10.1
- Opera 44.0