CSS GRID ITEMS

In a grid, all the children elements are the grid items. In CSS Grid, there are various properties to play with the grid items and their layouts. Let's have a look at a few properties.

The grid-column-start / grid-column-end Properties

grid-column-start determines a grid item location within the grid. There are specfic grid lines which are referred in this case.

grid-column-start is the location where grid item begins, and grid-column-end is the location where it ends in the columns.

.grid {
  display:grid;
  grid-template-columns: auto auto auto auto;
}
.grid .first {
  grid-column-start: 1;
  grid-column-end: 3;
}

Output:

The grid-row-start / grid-row-end Properties

The grid-row-start property accepts a location where the grid item begins, and grid-row-end property accepts the location where it ends.

.grid {
  display:grid;
  grid-template-columns: auto auto auto auto;
}

.grid .first {
  grid-row-start: 1;
  grid-row-end: 3;
}

Output:

Justify Self

justify-self aligns a grid item inside a cell along the row axis. It can have the following values:

• start
• end - aligns the grid item towards the ending edge of the cell.
• center
• stretch

justify-self:start

justify-self:start aligns the grid item towards the starting edge of the cell.

.grid {
  display:grid;
  grid-template-columns: auto auto;
}
.grid > div {
  justify-self:start;
}

Output:

justify-self:center

justify-self:center aligns the grid item towards the center of the cell.

.grid {
  display:grid;
  grid-template-columns: auto auto;
}
.grid > div {
  justify-self:center;
}

Output:

justify-self:end

justify-self:end aligns the grid item towards the ending edge of the cell.

.grid {
  display:grid;
  grid-template-columns: auto auto;
}
.grid > div {
  justify-self:end;
}

justify-self:stretch

justify-self:stretch just fills the whole width of the cell. This is the default value.

.grid {
  display:grid;
  grid-template-columns: auto auto;
}
.grid > div {
  justify-self:stretch;
}

Align Self

align-self property aligns a grid item inside a cell along the column axis (y-axis), which is the opposite to justify-self which aligns the items along the row axis. Here are the different values for the align-self property:

• start
• end
• center
• stretch

align-self:start

align-self:start aligns the item towards the vertical starting edge of the cell:

.grid {
  display:grid;
  grid-template-columns: auto auto;
}
.grid > div {
  align-self:start;
}

Output:

align-self:end

align-self:end aligns the item towards the vertical ending edge of the cell:

.grid {
  display:grid;
  grid-template-columns: auto auto;
}
.grid > div {
  align-self:end;
}

Output:

align-self:center

align-self:center aligns the item towards the center of the cell:

.grid {
  display:grid;
  grid-template-columns: auto auto;
}
.grid > div {
  align-self:center;
}

Output:

align-self:stretch

align-self:stretch stretches and fills the item inside the cell. This is the default property.

.grid {
  display:grid;
  grid-template-columns: auto auto;
}
.grid > div {
  align-self:stretch;
}