HTML & CSS Interview Question #94

What is CSS Grid?

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

Quick Interview Answer

CSS Grid is a two-dimensional layout system designed to control rows and columns together. It is particularly effective for page regions, dashboards, galleries, card grids, and layouts where items need explicit relationships across both dimensions.

Detailed Explanation

CSS Grid is a two-dimensional layout system designed to control rows and columns together. It is particularly effective for page regions, dashboards, galleries, card grids, and layouts where items need explicit relationships across both dimensions.

A grid container is created with display: grid or inline-grid. Direct children become grid items that can be placed into explicit or implicit grid tracks.

Code Example

.dashboard {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
}

.sidebar { grid-column: 1; }
.content { grid-column: 2; }