⚈
Deep Tech Point
first stop in your tech adventure

A complete guide to CSS grid items’ properties and their values

July 13, 2021 | CSS

This article will offer a complete guide to CSS grid items’ settings – their properties and values. With the help of a few examples, you will learn the main properties for grid items (the children) and how their values impact grid layout at the end.

What is a grid item and what are its settings aka properties and values?

A grid container contains grid items. Following this logic – a grid container is a parent, and grid item(s) are children. When we set a display property for an HTML element, all direct children of that element become grid items. A grid container embodies grid items that are placed inside columns and rows of a grid. By default, a container has one grid item for each column and in each row. Of course, you can apply different grid items’ properties and their values so that the grid items span through multiple columns and rows. First, let’s take a look at the list of settings aka properties and values for grid items:

Properties that define item’s location within the grid

With the following list of properties and their values we define a grid item’s location within the grid:

grid-column-start and grid-row-start specify the exact line where the grid item begins. grid-column-end and grid-row-end define where on the line the item ends.

The values that we can use when we specify the properties mentioned above are:

For an easier explanation of value, here is a visual presentation for grid-column-start, however as already explained all these values apply for all four properties that define the grid item’s location within the grid (grid-column-start, grid-column-end, grid-row-start and grid-row-end.):

.my-grid-item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
}

And here we present a few examples of how we can place a grid item on a grid: 

.my-grid-item-1 { //we have to provide an exact name of a grid item we want to manipulate 
  grid-column-start: 3; // we provide a number of a column line where the item starts 
  grid-column-end: six; // we provide a name of a column line where the item begins 
  grid-row-start: 2; // we define that an item will start at a row-line number 2  
  grid-row-end: span 2; // we provide that an item will end after spanning through 2 rows 
}

Since you’ll be probably defining several items within the grid, it is important to know that these grid items can overlap each other. For this purpose, you can use z-index – this way you can control the stacking order of grid items.

Shorthanding item’s location within the grid with grid-column and grid-row

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

Values for the shorthand version are basically the same as the ones for the longhand version you have to define the beginning and end for each track, t.i. columna and row:
<start-line> / <end-line> or <start-line> / span <value>

However, if you do not define a value of the end line or a span , CSS will by default span the grid item for one track (column or row).

Here is a shorthand version of the example above: 

.my-grid-item-1 { //we have to provide an exact name of a grid item we want to manipulate 
  grid-column: 3 / six; // we provide a number of a column line where the item starts and a name of a line where the item ends  
  grid-row: 2 / span 2; // we provide a number of a row line where the item starts and that the item spans through 2 rows 
}

Grid item and grid-area property

grid-area property names a grid item. Obviously, this has a purpose, that grid item name can be referenced by a template created with the grid-template-areas property.
We can even use grid-area property for even shorter shorthand for grid-row-start + grid-column-start + grid-row-end + grid-column-end.

Values that we can apply for the grid-area property are:

Presenting these values visually: 

.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

This example serves as a case to a assign a name to the item:

.my-grid-item {
  grid-area: top;
}

And the following examples serves as the short-shorthand case for grid-row-start + grid-column-start + grid-row-end + grid-column-end. As a show case we took the previous example, but because we don’t have span <value> for this property we had to rename the grid-row-end value:

.my-grid-item-d {
  grid-area: 2 / 3 / 4 / six;
}

A role of justify-self and align-self properties when aligning a grid item inside a cell

justify-self aligns a grid item inside a cell along the inline (row) axis.
align-self aligns a grid item inside a cell along the block (column) axis.

The values of justify-self and align-self properties refer to a grid item inside a single cell:

If we don’t apply the justify-self and align-self properties, “stretch” value is the default value for aligning a grid item inside a cell.

Visual presentation of justify-self and align-self values: 

.item {
  justify-self: start | end | center | stretch;
}

However, if you want to justify or/and align all the items in a grid, you can define it through a the grid container property with the justify-items or align-items property.

Shorthand version for align-self and justify-self properties is place-self

place-self is a handy property that shorthands align-self and justify-self properties in one single declaration.

Values we can apply to a place-self property are:

Visual presentation of place-self property values are: 

.item {
  place-self: auto | normal | self-start | self-end | flex-start | flex-end | center | baseline | first baseline | last baseline | stretch
}