Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Usage of CSS grid-row-start property
The CSS grid-row-start property specifies on which row line a grid item will start. This property allows you to control the exact row position where a grid item begins, giving you precise control over grid layout positioning.
Syntax
selector {
grid-row-start: value;
}
Possible Values
| Value | Description |
|---|---|
auto |
Default value. The item will be placed automatically |
line-number |
Specifies which row line to start at (1, 2, 3, etc.) |
line-name |
Specifies a named grid line to start at |
span n |
Specifies how many rows the item will span |
Example: Basic Grid Row Start
The following example demonstrates how grid-row-start positions grid items at specific row lines −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 60px;
gap: 10px;
background-color: #f0f0f0;
padding: 20px;
width: 400px;
}
.container > div {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 15px 0;
font-size: 18px;
border-radius: 5px;
}
.item1 {
grid-row-start: 2;
background-color: #ff9800;
}
.item3 {
grid-row-start: 1;
background-color: #2196F3;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
<div class="item5">Item 5</div>
<div class="item6">Item 6</div>
</div>
</body>
</html>
A grid layout where Item 1 (orange) starts at row 2, Item 3 (blue) starts at row 1, and other items flow naturally. This creates a layout where some items are repositioned from their default flow order.
Example: Using Named Grid Lines
You can also use named grid lines to specify where items should start −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: [header-start] 80px [content-start] 100px [footer-start] 60px;
gap: 10px;
background-color: #f5f5f5;
padding: 15px;
width: 350px;
}
.container > div {
background-color: #673AB7;
color: white;
text-align: center;
padding: 20px 0;
border-radius: 4px;
}
.header {
grid-row-start: header-start;
background-color: #E91E63;
}
.content {
grid-row-start: content-start;
background-color: #009688;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="content">Content</div>
<div>Footer</div>
</div>
</body>
</html>
A grid with named row lines where the header starts at "header-start" and content starts at "content-start", creating a structured layout with clearly defined sections.
Conclusion
The grid-row-start property provides precise control over where grid items begin in the row direction. Use numeric values for simple positioning or named lines for more semantic layouts.
Updated on: 2026-03-15T13:21:58+05:30
63 Views
Advertisements