Loading lesson path

CSS•Modern Layout

CSS Grid Items

Overview

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:

Formula

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

Formula

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

Formula

Let the first grid item start at column - line 1, and end on column - line 3:.item1 {

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

Result:

The CSS grid-column Property

Formula

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

Example

Formula

Let the first grid item start at column - line 1, and let it span 2 columns:.item1 {
grid - column: 1 / span

2;
}

Result:

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

Formula

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

Formula

Let the first grid item start at row - line 1, and end on row - line 3:.item1 {

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

Result:

The CSS grid-row Property

Formula

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

Example

Formula

Let the first grid item start at row - line 1, and let it span 2 rows:.item1 {

grid-row: 1 / span 2;
}

Result:

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

Let the first grid item start at column-line 1, and let it span 2 columns, also let the first grid item start at row-line 1, and let it span 2 rows:.item1 {

grid-column: 1 / span 2;
grid-row: 1 / span 2;
}

Result:

All CSS Grid Item Properties

Property

Description align-self

Formula

Aligns the content for a specific grid item along the column axis grid - area

A shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties grid-column

Formula

A shorthand property for the grid - column - start and the grid - column - end properties grid - column - end
Specifies where to end the grid item grid - column - start
Specifies where to start the grid item grid - row
A shorthand property for the grid - row - start and the grid - row - end properties grid - row - end
Specifies where to end the grid item grid - row - start
Specifies where to start the grid item justify - self
Aligns the content for a specific grid item along the row axis place - self
A shorthand property for the align - self and the justify - self properties

CSS Flex Items Code Challenge

CSS Media Queries Code Challenge

Loading lesson path

Learn/CSS/Modern Layout

CSS•Modern Layout

CSS Grid Items

Overview

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:

Formula

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

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

Formula

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

Formula

Let the first grid item start at column - line 1, and end on column - line 3:.item1 {

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

Result:

The CSS grid-column Property

Formula

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

Example

Formula

Let the first grid item start at column - line 1, and let it span 2 columns:.item1 {
grid - column: 1 / span

2;
}

Result:

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

Formula

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

Formula

Let the first grid item start at row - line 1, and end on row - line 3:.item1 {

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

Result:

The CSS grid-row Property

Formula

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

Example

Formula

Let the first grid item start at row - line 1, and let it span 2 rows:.item1 {

grid-row: 1 / span 2;
}

Result:

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

Let the first grid item start at column-line 1, and let it span 2 columns, also let the first grid item start at row-line 1, and let it span 2 rows:.item1 {

grid-column: 1 / span 2;
grid-row: 1 / span 2;
}

Result:

All CSS Grid Item Properties

Property

Description align-self

Formula

Aligns the content for a specific grid item along the column axis grid - area

A shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties grid-column

Formula

A shorthand property for the grid - column - start and the grid - column - end properties grid - column - end
Specifies where to end the grid item grid - column - start
Specifies where to start the grid item grid - row
A shorthand property for the grid - row - start and the grid - row - end properties grid - row - end
Specifies where to end the grid item grid - row - start
Specifies where to start the grid item justify - self
Aligns the content for a specific grid item along the row axis place - self
A shorthand property for the align - self and the justify - self properties

CSS Flex Items Code Challenge

CSS Media Queries Code Challenge