A Comprehensive Guide to CSS Grid Layout: Fundamentals, Advanced Techniques, and Practical Examples

CSS Grid is one of the most powerful layout systems in modern CSS, yet many developers still rely on display:flex without exploring its full capabilities. This guide aims to demystify Grid by walking through its core concepts and practical usage.

Getting Started – To enable Grid, simply set display: grid on a container. By default, the grid creates a single column that spans the full width of the parent.

.wrapper {
  display: grid;
}

Columns can be defined using grid-template-columns . For a two‑column layout you might write:

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

The fr unit distributes free space proportionally; in the example above the first column receives 1/4 of the space and the second 3/4.

Percentage vs. Fractional Units – Percentages allocate space strictly based on the container’s size, which can cause overflow when a gap is added. Fractional units first subtract the gap size, then distribute the remaining space, preventing overflow.

Implicit and Explicit Tracks – Defining grid-template-columns: 1fr 3fr creates two explicit columns. If more items are placed, the grid automatically generates implicit columns or rows as needed. Explicit rows can be set with grid-template-rows .

Repeating Patterns – The repeat() function simplifies repetitive column definitions, e.g., a 7‑column calendar:

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

Item Placement – Grid items can be positioned using grid-column and grid-row . Ranges are expressed with a slash, not division, e.g.:

.child {
  grid-column: 1 / 4; /* spans columns 1, 2, and 3 */
}

Negative indices count from the end, allowing mixed positive/negative placement.

Grid Areas – For semantic layouts, grid-template-areas lets you name sections and assign them with grid-area :

.parent {
  grid-template-areas:
    "sidebar header"
    "sidebar main";
}
.sidebar { grid-area: sidebar; }
.header  { grid-area: header; }
.main    { grid-area: main; }

This approach is ideal when the number of rows and columns is fixed.

Accessibility Note – The visual order created by Grid does not affect the DOM order, so keyboard navigation (Tab order) follows the source order, not the visual layout. To maintain a logical reading order, developers must reorder DOM elements to match the visual sequence or await future CSS properties like reading-order , which are not yet implemented.

By mastering these concepts—basic syntax, fractional units, gaps, implicit/explicit tracks, repeat, item placement, grid areas, and accessibility—readers can create robust, responsive layouts that surpass many common Flexbox solutions.