CSS ग्रिड लेआउट में ग्रिड रो (Grid Rows) क्षैतिज (हॉरिजॉन्टल) ट्रैक्स होते हैं जो ग्रिड कंटेनर में ग्रिड आइटम्स को पंक्तियों में व्यवस्थित करते हैं। grid-template-rows प्रॉपर्टी से रो की संख्या और आकार परिभाषित किए जाते हैं।
ग्रिड रो परिभाषित करना
grid-template-rows: 100px 200px auto- 3 रो: पहली 100px, दूसरी 200px, तीसरी ऑटोgrid-template-rows: repeat(4, 1fr)- 4 समान ऊंचाई वाली रोgrid-template-rows: minmax(100px, auto)- न्यूनतम 100px, अधिकतम कंटेंटgrid-auto-rows: 100px- अप्रत्यक्ष (इम्प्लिसिट) रो के लिए डिफ़ॉल्ट आकार
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 200px; /* 2 explicit rows */
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
}
.item {
background-color: #e74c3c;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Row 1, Col 1</div>
<div class="item">Row 1, Col 2</div>
<div class="item">Row 1, Col 3</div>
<div class="item">Row 2, Col 1</div>
<div class="item">Row 2, Col 2</div>
<div class="item">Row 2, Col 3</div>
<div class="item">Row 3 (Implicit), Col 1</div>
<div class="item">Row 3 (Implicit), Col 2</div>
<div class="item">Row 3 (Implicit), Col 3</div>
</div>
</body>
</html>
मुख्य अवधारणाएं:
- एक्सप्लिसिट रो:
grid-template-rowsद्वारा परिभाषित - इम्प्लिसिट रो: आइटम्स अधिक होने पर ऑटोमैटिक बनते हैं (
grid-auto-rowsसे आकार) - ग्रिड लाइन्स: रो को अलग करने वाली क्षैतिज रेखाएं (संख्या 1 से शुरू)
- रो स्पैन:
grid-row: span 2याgrid-row: 1 / 3से आइटम कई रो में फैल सकता है
नोट: मूल लेख में एक इमेज रेफरेंस था जो यहां शामिल नहीं है।
