CSS Grid Items

Every grid item is associated with a grid area, a rectangular set of adjacent grid cells that the grid item occupies.

The grid area defines the containing block for the grid item within which the self-alignment properties (justify-self and align-self) determine their actual position.

The cells that a grid item occupies also influence the sizing of the grid’s rows and columns.

The location of a grid item’s grid area within the grid is defined by its placement, which consists of:

• grid position
• grid span

grid position - The grid item’s location in the grid in each axis. A grid position can be either definite (explicitly specified) or automatic (determined by auto-placement).

grid span - How many grid tracks the grid item occupies in each axis. A grid item’s grid span is always definite, defaulting to 1 in each axis if it can’t be otherwise determined for that axis.

The Grid Items Placement Properties

The following is used to specify a grid item’s placement:

Longhand properties:

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

Shorthand properties:

• grid-row
• grid-column
• grid-area

The grid-placement property longhands are organized into three shorthands:

grid-row-start

The grid-row-start property specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area.

Syntax:

grid-row-start: auto|row-line;

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

.item3 {
  grid-row-start: 1;
  border: 2px solid red;
}

grid-row-end

The grid-row-end property specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area.

Syntax:

grid-row-end: auto|row-line|span n;

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

.item3 {
  grid-row-end: 1;
  border: 2px solid red;
}

grid-row-start + grid-row-end

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

.item3 {
  grid-row-start: 1;
  grid-row-end: 4;
  border: 2px solid red;
}

grid-column-start

The grid-column-start property specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area.

Syntax:

grid-column-start: auto|span n|column-line;

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

.item3 {
  grid-column-start: 1;
  border: 2px solid red;
}

grid-column-end

The grid-column-end property specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area.

Syntax:

grid-column-end: auto|span n|column-line;

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

.item3 {
  grid-column-end: 1;
  border: 2px solid red;
}

grid-column-start + grid-column-end

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

.item3 {
  grid-column-start: 1;
  grid-column-end: 4;
  border: 2px solid red;
}

grid-row

The grid-row shorthand property specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.

• grid-row-start
• grid-row-end

Syntax:

grid-row: grid-row-start / grid-row-end;

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

.item3 {
  grid-row: 1/4;
  border: 2px solid red;
}

grid-column

The grid-column shorthand property specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.

• grid-column-start
• grid-column-end

Syntax:

grid-column: grid-column-start / grid-column-end;

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

.item3 {
  grid-column: 1/4;
  border: 2px solid red;
}

grid-area

The grid-area shorthand property specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.

Syntax:

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

.item3 {
  grid-area: 1/2/3/4;
  border: 2px solid red;
}

All CSS Grid Item Properties