justify-self # 13

justify-self

Aligns the grid items inside the cell along the row axis (horizontal axis). This value applies to a grid item inside a single cell.

Values

• start – aligns the grid item to be flush with the start edge of the cell
  

• end – aligns the grid item to be flush with the end edge of the cell
  

• center – aligns the grid item in the center of the cell
  

• stretch – fills the whole width of the cell (this is the default)

start

end

center

stretch (default)

 

Code example

.grid-container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(2, 50px);
   grid-gap: 1rem;
}

.item1 {
   background-color: red;
}

.item2 {
   background-color: blue;
   justify-self: start;
}

.item3 {
   background-color: yellow;
}

.item4 {
   background-color: green;
}

.item5 {
   background-color: orange;
}

Previous PostNext Post