CSS3 Grid Extra Properties

Next ❯Common Property Value

This extra grid properties will change the alignment of grid-items within their cell, for all grid-items at once via parent properties and, at individual level via child properties

  • turned_in_notGrid extra properties
    • labelParent Properties
      • justify-items
      • align-items
      • place-items
      • justify-content
      • align-content
      • place-content
    • labelChild Properties
      • justify-self
      • align-self
      • place-self

Parent Properties

justify-items

It aligns all the grid-items in their cell along X-axis at once

Hide grid
1
2
3
4
5

Aligns all the grid-items in the center of their cell along x-axis

justify-items:
.grid-container {
 display: grid;
 justify-items:center;
 height: 120px;
}
justify-itemssubject
justify-itemsclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style type="text/css">
.grid-container {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 justify-items:center;
 gap: 5px;
 height: 120px;
 border: 5px solid #42c6b3;
}
.grid-container div{
  background-color: #3e3737;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  color: white;
}
</style>
</head>
<body>
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div style="font-size: 10px;">4</div>
  <div>5</div>
</div>
</body>
</html>

align-items

It aligns all the grid-items in their cell along Y-axis at once

Hide grid
1
2
3
4
5

Aligns all the grid-items in the center of their cell along y-axis

align-items:
.grid-container {
 display: grid;
 align-items:center;
 height: 120px;
}
align-itemssubject
align-itemsclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style type="text/css">
.grid-container {
 display:grid;
 grid-template-columns: 1fr 1fr 1fr;
 align-items: center;
 gap: 5px;
 height: 120px;
 border: 5px solid #42c6b3;
}
.grid-container div{
  background-color: #3e3737;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  color: white;
}
</style>
</head>
<body>
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div style="font-size: 10px;">4</div>
  <div>5</div>
</div>
</body>
</html>

place-items

It sets both the align-items and justify-items properties in a single declaration.

Syntax 

place-items: align-items justify-items
  • Note! If single value is assigned then it will set the same for both properties
Hide grid
1
2
3
4
5

Aligns all the grid-items in the center of their cell along xy-axis

place-items:
.grid-container {
 display: grid;
 place-items:center;
 height: 120px;
}
place-itemssubject
place-itemsclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style type="text/css">
.grid-container {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 place-items:center;
 gap: 5px;
 height: 120px;
 border: 5px solid #42c6b3;
}
.grid-container div{
  background-color: #3e3737;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  color: white;
}
</style>
</head>
<body>
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div style="font-size: 10px;">4</div>
  <div>5</div>
</div>
</body>
</html>

justify-content

It aligns the columns along x-axis, only works when total grid-items width is samller then of the container width

1
2
3
4
5
6

Align the columns in the center of the container

justify-content:
.grid-container {
 display: grid;
 grid-template-columns:50px 50px 50px;
 justify-content:center;
 min-width: 250px;
}
justify-contentsubject
justify-contentclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style type="text/css">
.grid-container {
  display:grid;
  grid-template-columns:50px 50px 50px;
  justify-content:center;
  min-width: 250px;
  border: 5px solid #42c6b3;
 }
.grid-container div{
  background-color: #3e3737;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  color: white;
}
</style>
</head>
<body>
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
</body>
</html>

align-content

It aligns the rows along Y-axis, only works when total grid-items height is samller then of the container height

1
2
3
4

Align the rows in the center of the container

align-content:
.grid-container {
 display: grid;
 grid-template-columns:1fr 1fr;
 align-content: center;
 height: 145px;
}
align-contentsubject
align-contentclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style type="text/css">
.grid-container {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-content: center;
  height: 145px;
  border: 5px solid #42c6b3;
}
.grid-container div{
  background-color: #3e3737;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  color: white;
}
</style>
</head>
<body>
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
</body>
</html>

place-content

It sets both the align-content and justify-content properties in a single declaration.

Syntax 

place-content: align-content justify-content
  • Note! If single value is assigned then it will set the same for both properties
1
2
3
4

Align the cells in the center of the container

place-content:
.grid-container {
 display: grid;
 grid-template-columns:50px 50px;
 place-content: center;
 height: 145px;
 min-width:250px;
}
place-contentsubject
place-contentclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style type="text/css">
.grid-container {
  display:grid;
  grid-template-columns:50px 50px;
  place-content: center;
  height: 145px;
  min-width:250px;
  border: 5px solid #42c6b3;
}
.grid-container div{
  background-color: #3e3737;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  color: white;
}
</style>
</head>
<body>
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
</body>
</html>

Child Properties


justify-self

It aligns the grid item according to its value inside their cell along X-axis

Hide grid
1
2
3
4
5
6

Grid item align itself according to its value inside their cell along X-axis
All values are used above
default: auto

<div className="grid-container">
  <div style="justify-self:auto;">1</div>
  <div style="justify-self:baseline;font-size:15px;">2</div>
  <div style="justify-self:center;">3</div>
  <div style="justify-self:start;">4</div>
  <div style="justify-self:end;">5</div>
  <div style="justify-self:stretch;">6</div>
</div>
justify-selfsubject
justify-selfclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style type="text/css">
.grid-container {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:5px;
  border: 5px solid #42c6b3;
}
.grid-container div{
  background-color: #3e3737;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  color: white;
}
</style>
</head>
<body>
<div class="grid-container">
  <div style="justify-self:auto;">1</div>
  <div style="justify-self:baseline;font-size:15px;">2</div>
  <div style="justify-self:center;">3</div>
  <div style="justify-self:start;">4</div>
  <div style="justify-self:end;">5</div>
  <div style="justify-self:stretch;">6</div>
</div>
</body>
</html>

align-self

It aligns the grid item according to its value inside their cell along Y-axis

Hide grid
1
2
3
4
5
6

Grid item align itself according to its value inside their cell along Y-axis
All values are used above
default: auto

<div className="grid-container">
  <div style="align-self:auto;">1</div>
  <div style="align-self:baseline;font-size:15px;">2</div>
  <div style="align-self:center;">3</div>
  <div style="align-self:start;">4</div>
  <div style="align-self:end;">5</div>
  <div style="align-self:stretch;">6</div>
</div>
align-selfsubject
align-selfclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style type="text/css">
.grid-container {
  display:grid;
  gap:5px;
  grid-template:60px 60px/1fr 1fr 1fr;
  border: 5px solid #42c6b3;
}
.grid-container div{
  background-color: #3e3737;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  color: white;
}
</style>
</head>
<body>
<div class="grid-container">
  <div style="align-self:auto;">1</div>
  <div style="align-self:baseline;font-size:15px;">2</div>
  <div style="align-self:center;">3</div>
  <div style="align-self:start;">4</div>
  <div style="align-self:end;">5</div>
  <div style="align-self:stretch;">6</div>
</div>
</body>
</html>

place-self

It sets both the align-self and justify-self properties in a single declaration.

Syntax 

place-self: align-self justify-self
  • Note! If single value is assigned then it will set the same for both properties
Hide grid
1
2
3
4
5
6

Grid item align itself according to its value inside their cell along YX-axis
All values are used above
default: auto

<div className="grid-container">
  <div style="place-self:auto;">1</div>
  <div style="place-self:baseline;font-size:15px;">2</div>
  <div style="place-self:center;">3</div>
  <div style="place-self:start;">4</div>
  <div style="place-self:end;">5</div>
  <div style="place-self:stretch;">6</div>
</div>
place-selfsubject
place-selfclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style type="text/css">
.grid-container {
  display:grid;
  grid-template:60px 60px/1fr 1fr 1fr;
  gap:5px;
  border: 5px solid #42c6b3;
}
.grid-container div{
  background-color: #3e3737;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  color: white;
}
</style>
</head>
<body>
<div class="grid-container">
  <div style="place-self:auto;">1</div>
  <div style="place-self:baseline;font-size:15px;">2</div>
  <div style="place-self:center;">3</div>
  <div style="place-self:start;">4</div>
  <div style="place-self:end;">5</div>
  <div style="place-self:stretch;">6</div>
</div>
</body>
</html>

  • Common Property Value
❮ Prev Grid Functions
Next ❯Common Property Value
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯