Grid Items

CSS Grid Items

A grid container contains one or more grid items.

All direct child elements of a grid container automatically become grid items.

Below is a grid container with five grid items:

CSS Sizing/Spanning Grid Items

A grid item can span over mulitiple columns or rows.

We can specify where to start and end a grid item by using the following properties:

• grid-column-start - Specifies on which column-line the grid item will start
• grid-column-end - Specifies on which column-line the grid item will end
• grid-column - Shorthand property for grid-column-start and grid-column-end
• grid-row-start - Specifies on which row-line the grid item will start
• grid-row-end - Specifies on which row-line the grid item will end
• grid-row - Shorthand property for grid-row-start and grid-row-end

The lines between the columns in a grid are called column-lines, and the lines between the rows in a grid are called row-lines.

We can refer to line numbers when placing a grid item in a grid container.

CSS grid-column-start and grid-column-end

The grid-column-start property specifies on which column-line the grid item will start.

The grid-column-end property specifies on which column-line the grid item will end.

Example

  .item1 {

    grid-column-start: 1;
  grid-column-end: 3;
}

The CSS grid-column Property

The grid-column property is a shorthand property for the grid-column-start and the grid-column-end properties.

Example

  .item1 {

    grid-column: 1 / span
  2;
}

CSS grid-row-start and grid-row-end

The grid-row-start property specifies on which row-line the grid item will start.

The grid-row-end property specifies on which row-line the grid item will end.

Example

  .item1 {

    grid-row-start: 1;
  grid-row-end: 3;
}

The CSS grid-row Property

The grid-row property is a shorthand property for the grid-row-start and the grid-row-end properties.

Example

  .item1 {

    grid-row: 1 / span 2;
}

Combine grid-column and grid-row

Here we use both the grid-column and grid-row properties to let a grid item span both columns and rows.

Example

  .item1 {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

All CSS Grid Item Properties