OnlineCBT
Define rows and columns together
CSS Grid is a two-dimensional layout system. The grid container defines tracks, lines and gaps; its direct children become grid items. Use it when column alignment across rows is part of the design, such as a product catalogue or a dashboard.
.dashboard {
display: grid;
grid-template-columns: 14rem minmax(0, 1fr);
grid-template-rows: auto 1fr;
gap: 1rem;
}
.dashboard__header { grid-column: 1 / -1; }
.dashboard__main { min-width: 0; }The header spans both explicit columns. The remaining items can occupy the sidebar and main area. minmax(0,1fr) allows the main track to shrink below its content-based automatic minimum when the design requires it; long content still needs appropriate wrapping or overflow handling.
Vocabulary
A track is the space between adjacent grid lines: a row or column. A cell is one row/column intersection. An area can contain several cells. gap separates tracks without adding outer padding around the whole container.
Explicit and implicit tracks
grid-template-columns and rows define the explicit grid. Placing more items can create implicit tracks. Use grid-auto-rows when those additional row sizes need a rule. Unexpected extra columns often come from a placement that refers beyond the intended explicit lines.
Grid versus flex
Choose grid when rows and columns should share track structure. Choose flex for a primarily one-axis sequence. They can be nested: a grid of cards may contain flex-column cards. The property belongs to the parent that manages the children in question.
Practice
- Create a header, sidebar and main region using the example.
- Enable the browser's grid overlay and identify line numbers and gaps.
- Add a fourth item and inspect the implicit placement.
- At a narrow width, switch to one column and preserve a logical source order.
हिन्दी संकेत: grid tracks parent तय करता है। gap अंदर tracks के बीच है; outer spacing के लिए padding अलग दें।
