CSS Grid Properties Showcase

This template demonstrates all CSS Grid properties with examples. Each section covers a specific property, its possible values, and a visual example.

Grid Container Properties

display: grid

Establishes a grid container, enabling grid layout for its children.

Item 1
Item 2
Item 3

grid-template-columns

Defines the columns of the grid: e.g., 100px 1fr 2fr, repeat(3, 1fr), auto.

Item 1
Item 2
Item 3

grid-template-rows

Defines the rows of the grid: e.g., 100px 1fr, auto, minmax(100px, 1fr).

Item 1
Item 2
Item 3
Item 4

grid-template-areas

Defines a grid layout using named areas, e.g., "header header" "main sidebar".

Header
Main
Sidebar

grid-template

Shorthand for grid-template-rows, grid-template-columns, and grid-template-areas.

Header
Main
Sidebar

grid-auto-columns

Sets the size of implicitly created columns, e.g., 100px, 1fr.

Item 1
Item 2
Item 3

grid-auto-rows

Sets the size of implicitly created rows, e.g., 100px, minmax(100px, auto).

Item 1
Item 2
Item 3
Item 4
Item 5

grid-auto-flow

Controls how auto-placed items are arranged: row, column, dense.

Item 1
Item 2
Item 3

gap

Sets spacing between grid items: single value or row-gap column-gap.

Item 1
Item 2
Item 3

justify-items

Aligns items along the inline (row) axis: start, end, center, stretch.

Item 1
Item 2
Item 3

align-items

Aligns items along the block (column) axis: start, end, center, stretch.

Item 1
Item 2

place-items

Shorthand for align-items and justify-items, e.g., center center.

Item 1
Item 2
Item 3

justify-content

Aligns the grid along the inline axis: start, end, center, space-between, space-around, space-evenly, stretch.

Item 1
Item 2

align-content

Aligns the grid along the block axis: start, end, center, space-between, space-around, space-evenly, stretch.

Item 1
Item 2

place-content

Shorthand for align-content and justify-content, e.g., center center.

Item 1
Item 2

grid-column-gap (Deprecated)

Sets spacing between columns (use column-gap or gap instead).

Item 1
Item 2

grid-row-gap (Deprecated)

Sets spacing between rows (use row-gap or gap instead).

Item 1
Item 2

grid-gap (Deprecated)

Shorthand for grid-row-gap and grid-column-gap (use gap instead).

Item 1
Item 2

Grid Item Properties

grid-column-start

Specifies the starting column line for an item, e.g., 1, span 2.

Item 1
Item 2
Item 3

grid-column-end

Specifies the ending column line for an item, e.g., 3, span 2.

Item 1
Item 2
Item 3

grid-row-start

Specifies the starting row line for an item, e.g., 1, span 2.

Item 1
Item 2
Item 3

grid-row-end

Specifies the ending row line for an item, e.g., 3, span 2.

Item 1
Item 2
Item 3

grid-column

Shorthand for grid-column-start and grid-column-end, e.g., 1 / 3.

Item 1
Item 2
Item 3

grid-row

Shorthand for grid-row-start and grid-row-end, e.g., 1 / 3.

Item 1
Item 2
Item 3

grid-area

Shorthand for grid-row-start, grid-column-start, grid-row-end, grid-column-end, or a named area, e.g., 1 / 1 / 3 / 3.

Item 1
Item 2
Item 3

justify-self

Aligns an item along the inline axis: start, end, center, stretch.

Item 1
Item 2
Item 3

align-self

Aligns an item along the block axis: start, end, center, stretch.

Item 1
Item 2

place-self

Shorthand for align-self and justify-self, e.g., center center.

Item 1
Item 2
Item 3
CSS Index