Skip to main content

Introduction to CSS Grid Item

CSS Grid Item​

In CSS Grid, an item refers to an element that is a direct child of a grid container and participates in the grid layout. Each item is positioned inside a grid cell and can span one or more cells.

To define an item in CSS Grid, you use the grid-item or shorthand grid property on the element.

As an example:

.item {
     grid-row: 1 / span 2; /* spans two rows */
     grid-column: 2 / 4; /* spans two columns */
}

In this example:

  • The .item class is defined to span two rows starting at the first row and two columns starting at the second column.
  • This will position the element in the second row, second column of the grid and make it span two rows and two columns.

You can also use the grid-area property as a shorthand to define both the row and column positions and the span of the item.

As an example:

.item {
     grid-area: 1 / 2 / 3 / 4; /* row start / column start / row end / column end */
}

In this example:

  • The .item class is defined to start at the first row and second column and end at the third row and fourth column.
  • This will position the element in the second row, second column of the grid and make it span two rows and two columns, just like in the previous example.

Example​

Here's an example of a CSS Grid layout with items:

Editor

Loading...

In this example:

  • We have a div element with a class of "grid-container" that contains nine div elements with a class of "grid-item".
  • The "grid-container" element has a display property of "grid", which creates a CSS Grid layout.
  • The grid-template-columns property is set to "repeat(3, 1fr)", which creates three columns with equal widths.
  • The grid-template-rows property is set to "repeat(3, 100px)", which creates three rows with a height of 100 pixels.
  • The grid-gap property is set to 10 pixels, which adds spacing between the "grid-item" elements.
  • The "grid-item" elements have a background color of "#ccc", padding of 20 pixels, a font size of 30 pixels, and text centered.
  • The :nth-child() pseudo-class is used to apply different styles to specific grid items.
  • The odd-numbered items have a background color of "#999" and white text.
  • The first item in each row has a different position using the grid-column and grid-row properties.

The grid-column Property​

The grid-column property is a CSS property that is used to specify the placement of an item in a CSS Grid layout. This property defines both the starting and ending position of the grid columns that an item should span.

The grid-column property can take one of the following values:

  • A single value, which specifies the grid column line that the item should start and end on.

  • Two values, which specify the starting and ending grid column lines that the item should span.

As an example:

/* An item that starts and ends on column line 3 */
.item {
     grid-column: 3;
}

/* An item that spans from column line 1 to column line 3 */
.item {
     grid-column: 1 / 3;
}

The grid-column property can also accept negative values, which count from the end of the grid line instead of the start.

As an example:

/* An item that starts on the third column line from the end and spans to the first column line from the end */
.item {
     grid-column: -3 / -1;
}

You can also use the span keyword to specify the number of columns that an item should span.

As an example:

/* An item that starts on the third column line and spans 2 columns */
.item {
     grid-column: 3 / span 2;
}

In this example:

  • The item starts on the third column line and spans two columns, so it will end on the fifth column line.

The grid-row Property​

The grid-row property is a CSS property that is used to specify the placement of an item in a CSS Grid layout. This property defines both the starting and ending position of the grid rows that an item should span.

The grid-row property can take one of the following values:

  • A single value, which specifies the grid row line that the item should start and end on.

  • Two values, which specify the starting and ending grid row lines that the item should span.

As an example:

/* An item that starts and ends on row line 3 */
.item {
     grid-row: 3;
}

/* An item that spans from row line 1 to row line 3 */
.item {
     grid-row: 1 / 3;
}

The grid-row property can also accept negative values, which count from the end of the grid line instead of the start.

As an example:

/* An item that starts on the third row line from the end and spans to the first row line from the end */
.item {
     grid-row: -3 / -1;
}

You can also use the span keyword to specify the number of rows that an item should span.

As an example:

/* An item that starts on the third row line and spans 2 rows */
.item {
     grid-row: 3 / span 2;
}

In this example:

  • The item starts on the third row line and spans two rows, so it will end on the fifth row line.

The grid-area Property​

The grid-area property is a shorthand CSS property used to specify the grid placement and spanning of an item within a CSS Grid layout. This property combines the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties into a single convenient shorthand.

The grid-area property can take one of the following values:

  • Four values, which represent grid-row-start, grid-column-start, grid-row-end, and grid-column-end in that order.

  • Three values, which represent grid-row-start, grid-column-start, and span followed by the number of columns and rows the item should span, separated by a slash (/) and in that order.

As an example:

/* An item that starts on row line 1 and column line 1 and spans to row line 3 and column line 4 */
.item {
     grid-area: 1 / 1 / 3 / 4;
}

/* An item that starts on row line 2 and column line 2 and spans 2 rows and 3 columns */
.item {
     grid-area: 2 / 2 / span 2 / span 3;
}

In the first example:

  • The item starts on row line 1 and column line 1, and spans to row line 3 and column line 4.

In the second example:

  • The item starts on row line 2 and column line 2, and spans 2 rows and 3 columns.
missing auto

When using the grid-area property, any missing values are assumed to be auto, which will cause the item to be automatically placed within the grid.

Naming Grid Items​

The grid-template-areas property takes a string value, where each line represents a row of the grid, and each string within that line represents a cell in the row. A period (.) represents an empty cell, while any other character represents a named area.

As an example:

Editor

Loading...

In this example:

  • We have a div element with a class of "grid-container" that contains four div elements with a class of "grid-item".
  • The "grid-container" element has a display property of "grid", which creates a CSS Grid layout.
  • The grid-template-columns property is set to "repeat(3, 1fr)", which creates three columns with equal widths.
  • The grid-template-rows property is set to "repeat(2, 1fr)", which creates two rows with equal heights.
  • The grid-gap property is set to 10 pixels, which adds spacing between the "grid-item" elements.
  • The "grid-item" elements have a background color of "#ccc", padding of 20 pixels, a font size of 30 pixels, and text centered.
  • Instead of using :nth-child() pseudo-class, we are naming the grid items using class names.
  • We have four named grid items - "header", "sidebar", "main-content", and "footer". Each of these items has a specific position in the grid using the grid-row and grid-column properties.

The Order of the Items​

In CSS Grid, you can control the order in which items are displayed using the order property. The order property is used to define the order in which items should appear in the grid, relative to other items. Items with a lower order value will appear before items with a higher order value.

As an example:

Editor

Loading...

In this example:

  • The grid-template-columns property is set to "repeat(3, 1fr)", which creates three columns with equal widths.
  • The grid-template-rows property is set to "repeat(2, 1fr)", which creates two rows with equal heights.
  • The grid-gap property is set to 10 pixels, which adds spacing between the "grid-item" elements.
  • The "grid-item" elements have a background color of "#ccc", padding of 20 pixels, a font size of 30 pixels, and text centered.