CSS Grid Item

1
2
3
4
5

Try It Yourself

Child elements (items)

The grid container contains grid items.

By default, each column of each row in the container has a grid item, but you can set the style of the grid items to span multiple columns and/or rows.

grid-column property:

grid-column This property defines where the item will be placed in a column.

You can define the starting and ending positions of the item.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Note:grid-column Properties are shorthand properties of grid-column-start and grid-column-end properties.

To place a certain item, you can refer to the line numbers, or use the keyword 'span' to define how many columns the item will span.

Example

Make "item1" start from the 1st column and end before the 5th column:

.item1 {
  grid-column: 1 / 5;
{}

Try It Yourself

Example

Make "item1" start from the 1st column and span 3 columns:

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

Try It Yourself

Example

Make "item2" start from the 2nd column and span 3 columns:

.item2 {
  grid-column: 2 / span 3;
{}

Try It Yourself

grid-row property:

grid-row The property defines which row the item is placed in.

You can define the starting and ending positions of the item.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

To place items, you can refer to the row number, or use the keyword "span" to define how many rows the item will span:

Example

Make "item1" start at row-line 1 and end at row-line 4:

.item1 {
  grid-row: 1 / 4;
{}

Try It Yourself

Example

Make "item1" start from the 1st row and span 2 rows:

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

Try It Yourself

grid-area property

grid-area The attribute can be used as a shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Example

Make "item8" start from row-line 1 and column-line 2, and end at row-line 5 and column line 6:

.item8 {
  grid-area: 1 / 2 / 5 / 6;
{}

Try It Yourself

Example

Make "item8" start from row-line 2 and column-line, and span 2 rows and 3 columns:

.item8 {
  grid-area: 2 / 1 / span 2 / span 3;
{}

Try It Yourself

Named grid items

grid-area The attribute can also be used to assign names to grid items.

Header
Menu
Main
Right
Footer

can be used through the grid container grid-template-areas to reference named grid items.

Example

The name of item1 is "myArea" and it spans all five columns of the five-column grid layout:

.item1 {
  grid-area: myArea;
{}
.grid-container {
  grid-template-areas: 'myArea myArea myArea myArea myArea';
{}

Try It Yourself

Each row is defined by single quotes (' ').

Columns in each row are defined within single quotes and separated by spaces.

Note:Dots represent grid items without names.

Example

Let 'myArea' span two columns in the five-column grid layout (dots represent items without names):

.item1 {
  grid-area: myArea;
{}
.grid-container {
  grid-template-areas: 'myArea myArea . . .';
{}

Try It Yourself

To define two rows, define the columns of the second row within another set of single quotes:

Example

To make 'item1' span two columns and two rows:

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
{}

Try It Yourself

Example

Name all items and create a web page template that is always available:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
{}

Try It Yourself

The order of items

The grid layout allows us to place items in any position we like.

The first item in the HTML code does not have to be displayed as the first item in the grid.

1
2
3
4
5
6

Example

.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }

Try It Yourself

You can rearrange the order of certain screen sizes by using media queries:

Example

@media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 4 / 2; }
  .item6 { grid-area: 2 / 3 / 3 / 4; }
{}

Try It Yourself