CSS Grid Container - Align Grid Content
When grid content does not fill its grid container, three properties control how that content is aligned:
justify-content- horizontal alignment, for content narrower than the container.align-content- vertical alignment, for content shorter than the container.place-content- a shorthand that coversalign-contentandjustify-content.
The CSS justify-content Property
Spare horizontal space in the container is what justify-content works with: it decides how the grid content is aligned horizontally when that space exists.
Its possible values are space-evenly, space-around, space-between, center, start, and end.
Note: justify-content does nothing unless the total width of the grid content is less than the width of the container.
justify-content: space-evenly
Grid items get equal amounts of space around them with space-evenly.
Prompt
Create a CSS Grid layout with a container holding 6 numbered items in a 3x2 grid. Set the grid columns to 70px each and use
justify-content: space-evenly to distribute space evenly around the columns. Give the container a background color and the items a distinct background color with padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid justify-content: space-evenly</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
justify-content: space-evenly;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid justify-content: space-evenly</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
justify-content: space-around
Each grid item is surrounded by space when you use space-around.
Prompt
Create a CSS Grid layout with a container holding 6 numbered items in a 3x2 grid. Set the grid columns to 70px each and use
justify-content: space-around to add equal space around each column. Give the container a background color and the items a distinct background color with padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid justify-content: space-around</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
justify-content: space-around;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid justify-content: space-around</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
justify-content: space-between
Space appears between the grid items when you use space-between.
Prompt
Create a CSS Grid layout with a container holding 6 numbered items in a 3x2 grid. Set the grid columns to 70px each and use
justify-content: space-between to place maximum space between columns. Give the container a background color and the items a distinct background color with padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid justify-content: space-between</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
justify-content: space-between;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid justify-content: space-between</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
justify-content: center
Using center gathers the grid items in the center of the container.
Prompt
Create a CSS Grid layout with a container holding 6 numbered items in a 3x2 grid. Set the grid columns to 70px each and use
justify-content: center to center the grid horizontally within the container. Give the container a background color and the items a distinct background color with padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid justify-content: center</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
justify-content: center;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid justify-content: center</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
justify-content: start
Using start gathers the grid items at the beginning of the container.
Prompt
Create a CSS Grid layout with a container holding 6 numbered items in a 3x2 grid. Set the grid columns to 70px each and use
justify-content: start to align the grid to the start of the container. Give the container a background color and the items a distinct background color with padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid justify-content: start</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
justify-content: start;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid justify-content: start</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
justify-content: end
Using end gathers the grid items at the far end of the container.
Prompt
Create a CSS Grid layout with a container holding 6 numbered items in a 3x2 grid. Set the grid columns to 70px each and use
justify-content: end to align the grid to the end of the container. Give the container a background color and the items a distinct background color with padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid justify-content: end</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
justify-content: end;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid justify-content: end</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
The CSS align-content Property
The vertical counterpart is align-content: when the container has height to spare, it decides how the grid content is aligned vertically.
Its possible values are space-evenly, space-around, space-between, center, start, and end.
Note: align-content does nothing unless the total height of the grid content is less than the height of the container.
To make the effect easier to see, the examples below use a container 300 pixels high.
align-content: center
Using center gathers the grid items in the middle of the container.
Prompt
Create a CSS Grid layout with a container of 300px height holding 6 numbered items in a 3x2 grid. Use
align-content: center to vertically center the grid rows within the container. Give the container a background color and the items a distinct background color with padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid align-content: center</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
align-content: center;
height: 300px;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid align-content: center</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
align-content: space-evenly
Grid lines are spread evenly by space-evenly, so the spaces at the top, at the bottom, and between the lines are all equal.
Prompt
Create a CSS Grid layout with a container of 300px height holding 6 numbered items in a 3x2 grid. Use
align-content: space-evenly to distribute equal vertical space around the rows. Give the container a background color and the items a distinct background color with padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid align-content: space-evenly</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
align-content: space-evenly;
height: 300px;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid align-content: space-evenly</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
align-content: space-around
space-around makes the gaps between grid lines equal, while the space before the first row and after the last row is half of a gap between rows.
Prompt
Create a CSS Grid layout with a container of 300px height holding 6 numbered items in a 3x2 grid. Use
align-content: space-around to add equal vertical space around each row. Give the container a background color and the items a distinct background color with padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid align-content: space-around</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
align-content: space-around;
height: 300px;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid align-content: space-around</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
align-content: space-between
space-between also makes those gaps equal, but the first row sits flush against the container's top and the last row flush against its bottom.
Prompt
Create a CSS Grid layout with a container of 300px height holding 6 numbered items in a 3x2 grid. Use
align-content: space-between to place the first row at the top and the last row at the bottom. Give the container a background color and the items a distinct background color with padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid align-content: space-between</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
align-content: space-between;
height: 300px;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid align-content: space-between</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
align-content: start
Using start gathers the grid items at the top of the container.
Prompt
Create a CSS Grid layout with a container of 300px height holding 6 numbered items in a 3x2 grid. Use
align-content: start to align the grid rows to the top of the container. Give the container a background color and the items a distinct background color with padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid align-content: start</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
align-content: start;
height: 300px;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid align-content: start</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
align-content: end
Using end gathers the grid items at the bottom of the container.
Prompt
Create a CSS Grid layout with a container of 300px height holding 6 numbered items in a 3x2 grid. Use
align-content: end to align the grid rows to the bottom of the container. Give the container a background color and the items a distinct background color with padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid align-content: end</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
align-content: end;
height: 300px;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid align-content: end</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
The CSS place-content Property
Instead of writing align-content and justify-content separately, you can combine them with the shorthand place-content.
Given two values, it applies the first to align-content and the second to justify-content. So place-content: start center gives align-content the value start and justify-content the value center.
Given one value, it applies that value to both align-content and justify-content.
Note: place-content does nothing unless the total height and width of the grid content are less than the height and width of the container.
place-content: center
Using center gathers the grid items in the middle of the container on both axes, vertically and horizontally.
Prompt
Create a CSS Grid layout with a container of 300px height holding 6 numbered items in a 3x2 grid. Use
place-content: center to center the grid both vertically and horizontally within the container. Give the container a background color and the items a distinct background color with padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid place-content: center</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
place-content: center;
height: 300px;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid place-content: center</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
place-content: end space-between
With end space-between, the grid rows move toward the bottom of the container and the columns are spread horizontally with equal space between them.
Prompt
Create a CSS Grid layout with a container of 300px height holding 6 numbered items in a 3x2 grid with columns of 70px. Use
place-content: end space-between to align rows to the bottom and distribute columns with space between them. Give the container a background color and the items a distinct background color with padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid place-content: end space-between</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
place-content: end space-between;
height: 300px;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid place-content: end space-between</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>