CSS grid Property

What You’ll Learn

The grid property is a shorthand for defining rows, columns, and areas on a CSS Grid container in one declaration.

Introduction

The CSS grid property is a powerful tool that allows web developers to create complex and responsive grid-based layouts using a straightforward and declarative syntax.

This property is part of the CSS Grid Layout Module, which enables the design of web pages using a grid system with rows and columns. With CSS Grid, you can define areas of your web page, align items, and distribute space in a way that wasn't possible with traditional CSS layout methods.

Definition and Usage

To use grid layouts, first set display: grid on a container. Then use the grid shorthand (or longhand properties like grid-template-columns) to define the track sizes. The shorthand is convenient when you want to set rows and columns together, such as grid: auto-flow / 1fr 1fr 1fr;.

📝 Syntax

The grid property is a shorthand for defining grid-related properties in one declaration. The basic syntax is as follows:

element {
  grid: [grid-template-rows] / [grid-template-columns];
}

However, the grid shorthand can also include other properties, such as grid-template-areas, grid-auto-flow, grid-auto-rows, and grid-auto-columns.

Basic Example

.grid-container {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

Default Value

There is no default value for the grid property itself since it is a shorthand. The individual properties within the shorthand each have their own default values.

Syntax Rules

• The slash (/) separates row-related values from column-related values in many shorthand forms.
• Requires display: grid (or inline-grid) on the same element.
• Can combine template tracks, named areas, and auto-placement rules.
• The property is not inherited by child elements.
• Pair with gap for spacing between grid items.

💎 Property Values

The grid shorthand can set these sub-properties:

Examples Gallery

Create a simple 3×3 grid layout, then explore the grid shorthand, named areas, and responsive auto-fill columns.

.grid-container {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.grid-container {
  display: grid;
  grid: 80px 80px / 1fr 1fr 1fr;
  gap: 10px;
}

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  gap: 10px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 1rem;
}

♿ Accessibility

• Keep logical source order in HTML even when grid visually reorders items with named areas.
• Do not rely on layout alone to convey structure; use headings and landmarks (header, main, nav).
• Test keyboard navigation when grid changes item placement on different screen sizes.
• Ensure readable line lengths in grid cells, especially on wide screens.
• Maintain touch target spacing with gap between interactive grid items.

💡 Best Practices