Grid Properties
Grid Properties
grid-template-rows — defining rows
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 200px; /* first row 100px, second 200px */
}Just as grid-template-columns defines columns, grid-template-rows defines the height of rows. Often you leave rows to size automatically (based on content), but sometimes you want specific row heights — like a short header row and a tall content row. You can mix units freely: grid-template-rows: 80px 1fr 60px is a classic page shape (fixed header, flexible middle, fixed footer). This gives you full control over the vertical structure, matching the horizontal control from columns.
Spanning Cells — items covering multiple cells
.featured {
grid-column: span 2; /* this item spans 2 columns wide */
}
.tall {
grid-row: span 2; /* this item spans 2 rows tall */
}
/* Or exact placement using line numbers: */
.item { grid-column: 1 / 3; } /* from column line 1 to line 3 (2 cols) */grid-column: span 2 makes an item stretch across two columns, and grid-row: span 2 across two rows. This is how you make a "featured" card twice as wide as the others in a grid, or a hero image that spans the full width. You can also place items precisely using grid LINE numbers (grid-column: 1 / 3 means from line 1 to line 3). Spanning is what lets grid create magazine-style layouts where items are different sizes.Named Grid Areas — the most readable layout method
.page {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }grid-template-areas, giving each region a name, then assign elements to those names with grid-area. Look at the ASCII-art layout: "header" spans both columns on top, then "sidebar" and "content" sit side by side, then "footer" spans the bottom. It reads like a picture of the page — anyone can look at it and instantly understand the layout. This makes complex page structures incredibly readable and easy to rearrange (just move the words around). It's a genuinely elegant, favourite technique.Aligning Items in the Grid
.container {
display: grid;
justify-items: center; /* horizontal alignment of items in cells */
align-items: center; /* vertical alignment of items in cells */
}
/* Shorthand for both: */
.container { place-items: center; } /* centers items in every cell */Grid has alignment properties like flexbox. justify-items aligns items horizontally within their cells, align-items vertically. The handy shorthand place-items: center centers content in every cell both ways at once — perfect for a grid of centered icons or numbers. There are also justify-content/align-content for positioning the whole grid within its container. The alignment concepts carry over from flexbox, so this feels familiar — another reason learning flexbox first pays off.
A Full Page Layout — grid in action
body {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }min-height: 100vh so it fills the screen. Achieving this before grid required floats, clearfixes, and pain; now it's a readable, robust dozen lines. This grid-areas approach is how many real dashboards and app layouts are built. You've now met both flexbox and grid — the two tools that handle essentially every layout in modern web design.Exam Corner
grid-column: span 2;Q: What does grid-template-areas do? Lets you name grid regions and draw the layout as text, then assign elements with grid-area.
Q: What does place-items: center do? Centers items in every cell both horizontally and vertically.
Q: What does grid-template-rows: auto 1fr auto create? A layout with auto-sized top/bottom rows and a flexible middle row.
Q: Grid or flexbox for a full 2D page layout? Grid (often with flexbox for content inside each area).
grid-template-rows — rows define करना
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 200px; /* pehli row 100px, doosri 200px */
}जैसे grid-template-columns columns define करता है, grid-template-rows rows की height define करता है. अक्सर आप rows को अपने आप size होने देते हैं (content के आधार पर), पर कभी specific row heights चाहिए — जैसे छोटी header row और लंबी content row. Units freely mix कर सकते हैं: grid-template-rows: 80px 1fr 60px classic page shape है (fixed header, flexible middle, fixed footer). यह vertical structure पर पूरा control देता है, columns से horizontal control match करते.
Cells Span करना — items कई cells ढकते
.featured {
grid-column: span 2; /* yeh item 2 columns chauda span karta */
}
.tall {
grid-row: span 2; /* yeh item 2 rows lamba span karta */
}
/* Ya line numbers se exact placement: */
.item { grid-column: 1 / 3; } /* column line 1 se line 3 tak (2 cols) */grid-column: span 2 item को दो columns में खींचता है, और grid-row: span 2 दो rows में. ऐसे ही आप grid में "featured" card को बाकियों से दोगुना चौड़ा बनाते हैं, या hero image जो पूरी width span करे. Items को grid LINE numbers से precisely place भी कर सकते हैं (grid-column: 1 / 3 मतलब line 1 से line 3 तक). Spanning ही grid को magazine-style layouts बनाने देता है जहां items अलग sizes के हों.Named Grid Areas — सबसे पढ़ने योग्य layout method
.page {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }grid-template-areas से text के रूप में DRAW करते हैं, हर region को नाम देते, फिर grid-area से elements उन नामों को assign करते. ASCII-art layout देखिए: "header" ऊपर दोनों columns span करता, फिर "sidebar" और "content" side by side, फिर "footer" नीचे span करता. यह page की तस्वीर जैसा पढ़ता है — कोई भी इसे देखकर तुरंत layout समझ सकता है. यह जटिल page structures को बेहद पढ़ने योग्य और आसानी से पुनर्व्यवस्थित (बस शब्द इधर-उधर करो) बनाता है. सच में elegant, पसंदीदा तकनीक.Grid में Items Align करना
.container {
display: grid;
justify-items: center; /* cells me items ka horizontal alignment */
align-items: center; /* cells me items ka vertical alignment */
}
/* Dono ke liye shorthand: */
.container { place-items: center; } /* har cell me items center */Grid की flexbox जैसी alignment properties हैं. justify-items items को उनकी cells में horizontally align करता है, align-items vertically. काम का shorthand place-items: center हर cell में content दोनों तरह एक साथ center करता है — centered icons या numbers की grid के लिए perfect. पूरी grid को उसके container में position करने को justify-content/align-content भी हैं. Alignment concepts flexbox से आते हैं, तो यह परिचित लगता है — flexbox पहले सीखने का एक और फायदा.
पूरा Page Layout — grid काम करते हुए
body {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }min-height: 100vh ताकि screen भरे. Grid से पहले यह हासिल करना floats, clearfixes, और दर्द मांगता था; अब यह पढ़ने योग्य, मज़बूत दर्जन lines है. यह grid-areas approach ऐसे ही कई असली dashboards और app layouts बनते हैं. अब आप flexbox और grid दोनों मिल चुके — वे दो tools जो modern web design में मूलतः हर layout संभालते हैं.Exam Corner
grid-column: span 2;Q: grid-template-areas क्या करता है? Grid regions को नाम देकर layout को text के रूप में draw करने देता है, फिर grid-area से elements assign.
Q: place-items: center क्या करता है? हर cell में items को horizontally और vertically दोनों center करता है.
Q: grid-template-rows: auto 1fr auto क्या बनाता है? Auto-sized top/bottom rows और flexible middle row वाला layout.
Q: पूरे 2D page layout के लिए grid या flexbox? Grid (अक्सर हर area के अंदर content के लिए flexbox के साथ).
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.console.log देखने के लिए F12 दबाइए.