CSS grid Property

Definition and Usage

The grid property is a shorthand for the explicit and implicit grid settings on a grid container. It can set grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow.

First turn the element into a grid with display: grid (or inline-grid). Then use grid to define tracks and how extra items auto-place. The property is not inherited. Unspecified sub-properties reset to their initial values. gap is not reset by this shorthand.

CSS Syntax

Common pattern: rows / columns. Or fix one axis and use auto-flow on the other.

Property Values

You can also write a full grid-template value (including areas) as the single grid value.

How to Use grid

Create a grid container, then set tracks or auto-flow with one shorthand.

1. Set display: grid on the container.
2. Choose a form: explicit rows / columns, or auto-flow on one axis.
3. Add gap separately if you want gutters—the shorthand does not set them.
4. Prefer longhands when you only change one piece of the layout.

Live Preview

Six items in a grid container. Only the grid shorthand changes. Watch how tracks and flow rearrange.

CSS Examples

Each snippet focuses on the grid shorthand. Use Try It Yourself for a live editor.

<style>
  section {
    display: grid;
    grid: 80px 80px / 1fr 1fr 1fr;
  }
</style>

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</section>

<style>
  section {
    display: grid;
    grid: auto-flow / 1fr 1fr 1fr;
  }
</style>

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</section>

<style>
  section {
    display: grid;
    grid: repeat(2, 60px) / auto-flow 80px;
  }
</style>

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</section>

Key Takeaways