---
title: "Grid item properties"
date: "2026-03-05T05:19:05+00:00"
summary:
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/grid-item-properties"
id: "1bbb655b-35f1-4c1c-ab43-d44d274f50af"
---

Grid item properties control the placement and alignment of child elements in a grid container. The parent element must have the `display: grid` property set.

Column start
------------

The `grid-column-start` property specifies the column line where the item starts.

Option

Behavior

`2`

Start at column line 2

`span 2`

Span two columns from the current position

`-1`

Start at the last column line

Column end
----------

The `grid-column-end` property specifies the column line where the item ends.

Option

Behavior

`4`

End at column line 4

`span 2`

Span two columns

`-1`

End at the last column line

Row start
---------

The `grid-row-start` property specifies the row line where the item starts.

Option

Behavior

`1`

Start at row line 1

`span 2`

Span two rows from the current position

Row end
-------

The `grid-row-end` property specifies the row line where the item ends.

Option

Behavior

`3`

End at row line 3

`span 2`

Span two rows

Column shorthand
----------------

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

Option

Behavior

`1 / 3`

Start at line 1 and end at line 3

`1 / span 2`

Start at line 1 and span two columns

`1 / -1`

Span from the first column to the last column

Row shorthand
-------------

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

Option

Behavior

`2 / 4`

Start at line 2 and end at line 4

`1 / span 2`

Start at line 1 and span two rows

`1 / -1`

Span from the first row to the last row

Grid area
---------

The `grid-area` property assigns the item to a named area or specifies all four placement properties.

*   Use named areas: Assign to areas such as `header`, `sidebar`, or `footer`.
    
*   Use line numbers:
    

Option

Behavior

`1 / 2 / 3 / 4`

row-start / column-start / row-end / column-end

`1 / 1 / 2 / -1`

First row and all columns

Justify self
------------

The `justify-self` property aligns the item in its cell along the row axis.

Option

Behavior

`auto`

Inherit from the container. `auto` is the default selection.

`start`

Align to the start

`end`

Align to the end

`center`

Center in the cell

`stretch`

Fill the cell width

Align self
----------

The `align-self` property aligns the item in its cell along the column axis.

Option

Behavior

`auto`

Inherit from the container. `auto` is the default selection.

`start`

Align to the start

`end`

Align to the end

`center`

Center in the cell

`stretch`

Fill the cell width

Place self shorthand
--------------------

The `place-self` property is a shorthand for `align-self` and `justify-self`.

Option

Behavior

`auto`

Inherit from the container

`start`

Align to the end on both axes

`end`

Align to the end on both axes

`center`

Center from both axes

`stretch`

Fill cell on both axes

`start center`

Start vertically and center horizontally

`end center`

End vertically and center horizontally

`center start`

Center vertically and start horizontally

`center end`

Center vertically and end horizontally

Related properties
------------------

*   [Grid container properties](https://markdownlivepreview.com/#): Set up the grid structure.
    
*   [Flex item properties](/drupal-starter-kits/add-ons/site-studio/flex-item-properties "Flex item properties"): Alternative layout system.
    
*   [Display properties](/drupal-starter-kits/add-ons/site-studio/display-properties "Display properties"): Set the display mode.
    

For more information about CSS grid layout, visit [MDN: CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) and [CSS-Tricks: Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/).