HTML & CSS Interview Question #96

What are grid-template-columns and grid-template-rows?

CSS Layout, Display, Positioning, Flexbox & Grid Mid-Level Intermediate

Quick Interview Answer

grid-template-columns defines the columns in the explicit grid, while grid-template-rows defines its rows. Track sizes can use fixed lengths, percentages, fractional units, minmax(), repeat(), and other sizing functions.

Detailed Explanation

grid-template-columns defines the columns in the explicit grid, while grid-template-rows defines its rows. Track sizes can use fixed lengths, percentages, fractional units, minmax(), repeat(), and other sizing functions.

The definitions establish the grid tracks into which items are automatically or explicitly placed. Responsive designs often use flexible track sizing rather than hard-coded pixel widths.

Code Example

.gallery {
    display: grid;
    grid-template-columns:
        200px 1fr 1fr;
    grid-template-rows:
        auto minmax(200px, 1fr);
    gap: 1rem;
}