grid

Definition

The grid CSS property is a shorthand property that sets all the explicit grid properties (grid-template-rows, grid-template-columns, and grid-template-areas) and all the implicit grid properties (grid-auto-rows, grid-auto-columns, and grid-auto-flow) in a single declaration. CSS Grid Layout is a powerful two-dimensional layout system that allows you to create complex web layouts with rows and columns.

Syntax

.layout {
  display: grid;
  grid: auto-flow dense / repeat(3, minmax(0, 1fr));
}

Values

• grid: <grid-template-rows> / <grid-template-columns>.
• grid: <auto-flow> [dense]? / <track-list>.
• Combines template, auto-flow, and template areas in one declaration.

Practical Examples

.layout {
  display: grid;
  grid: auto-flow dense 1fr / repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

The grid shorthand sets template rows/columns and auto-flow behavior in one statement.

<div class="grid gap-6 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm" style="display:grid; grid:auto-flow dense 1fr / repeat(3,minmax(0,1fr)); gap:1.5rem;">
  <div class="rounded-xl bg-slate-100 p-4 text-sm text-slate-700">Auto-flow</div>
  <div class="rounded-xl bg-slate-100 p-4 text-sm text-slate-700">Auto-flow</div>
  <div class="rounded-xl bg-slate-100 p-4 text-sm text-slate-700">Auto-flow</div>
  <div class="rounded-xl bg-slate-100 p-4 text-sm text-slate-700" style="grid-column: span 2;">Span 2 columns</div>
</div>

Tips & Best Practices

• Use shorthand for quick prototypes; switch to explicit templates when naming areas.
• Combine with grid-template-areas for semantic layouts.

Accessibility & UX Notes

A structured grid improves reading order; still arrange DOM semantically.

Browser Support

Supported in modern browsers (Chromium 57+, Firefox 52+, Safari 10.1+).

Related

• grid-template, grid-auto-flow.
• grid-template-columns/rows.