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
CSS Grid Lines
CSS Grid Lines are the invisible horizontal and vertical lines that form the structure of a CSS grid container. These lines define where grid items can be positioned and create the foundation for precise layout control. Each grid line is numbered, starting from 1, and can be referenced to place items exactly where you want them.
Syntax
/* Column positioning */ grid-column-start: line-number; grid-column-end: line-number; /* Row positioning */ grid-row-start: line-number; grid-row-end: line-number; /* Shorthand */ grid-column: start / end; grid-row: start / end;
Understanding Grid Lines
Grid lines are automatically created when you define grid-template-columns and grid-template-rows. For a 3-column grid, you have 4 vertical lines (1, 2, 3, 4) and for a 3-row grid, you have 4 horizontal lines.
Example 1: Column Grid Lines
This example demonstrates placing a grid item from column line 2 to column line 4 −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
background-color: #f0f0f0;
padding: 20px;
border-radius: 8px;
}
.grid-item {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
font-size: 18px;
border-radius: 4px;
}
.span-item {
grid-column-start: 2;
grid-column-end: 4;
background-color: #2196F3;
}
</style>
</head>
<body>
<h2>Column Grid Lines Example</h2>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item span-item">Item 2 (Spans 2-4)</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
</div>
</body>
</html>
A grid layout with 3 columns where Item 2 (blue) spans from column line 2 to 4, covering two column spaces. The other items (green) occupy single grid cells.
Example 2: Row Grid Lines
This example shows placing a grid item from row line 2 to row line 4 −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(4, 80px);
gap: 10px;
background-color: #f9f9f9;
padding: 20px;
border-radius: 8px;
}
.grid-item {
background-color: #FF9800;
color: white;
padding: 15px;
text-align: center;
font-size: 16px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.row-span-item {
grid-row-start: 2;
grid-row-end: 4;
background-color: #9C27B0;
}
</style>
</head>
<body>
<h2>Row Grid Lines Example</h2>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item row-span-item">Item 2<br>(Spans rows 2-4)</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
</body>
</html>
A 2-column grid where Item 2 (purple) spans vertically from row line 2 to 4, occupying two row spaces. The other items (orange) fill the remaining grid cells.
Conclusion
CSS Grid Lines provide precise control over item placement by allowing you to specify exact start and end positions. Understanding grid line numbering is essential for creating complex, responsive layouts with CSS Grid.
1K+ Views
