Q12: How do grid-template-columns and grid-template-rows define CSS Grid layouts?
CSS Grid defines two-dimensional layouts using grid-template-columns and grid-template-rows. Tracks accept pixel lengths, percentages, viewport units, or responsive fractional length units (fr).
Defining Grid Columns and Rows
.grid-container {
display: grid;
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 80px auto;
gap: 16px;
}💡 Creates a 3-column grid where column 1 is 200px fixed, and remaining space splits between columns 2 and 3.
Key Takeaways
- CSS Grid manages two-dimensional spatial layouts simultaneously.
grid-template-columnsandgrid-template-rowsestablish layout matrices.
Knowledge Check
Which property defines the explicit horizontal column layout matrix in CSS Grid?