The align-content property aligns the entire grid along the block (vertical) axis within the grid container.
Following are the possible values for align-content property in grid layout.
1. start: Aligns the grid items to the start of the container along the block axis.
2. end: Aligns the grid items to the end of the container along the block axis.
3. center: Centers the grid items within the container along the block axis.
4. stretch: Stretches the grid items to fill the container along the block axis (default behavior).
5. space-between: Distributes the grid items evenly with the first item aligned to the start and the last item aligned to the end, with equal space between each pair of items along the block axis.
6. space-around: Distributes the grid items evenly with equal space around each item along the block axis.
7. space-evenly: Distributes the grid items evenly with equal space between them, including before the first item and after the last item along the block axis.
align-content.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-content in CSS Grid</title>
<style>
h1{
font-size: 1.1em;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
gap: 10px;
height: 20vh;
width: 30vw;
border: 2px solid black;
margin: 20px;
}
.start {
align-content: start;
}
.end {
align-content: end;
}
.center {
align-content: center;
}
.stretch {
align-content: stretch;
}
.space-between {
align-content: space-between;
}
.space-around {
align-content: space-around;
}
.space-evenly {
align-content: space-evenly;
}
.grid-item {
background: #4CAF50;
color: white;
padding: 20px;
height: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>align-content: start;</h1>
<div class="grid-container start">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
<h1>align-content: end;</h1>
<div class="grid-container end">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
<h1>align-content: center;</h1>
<div class="grid-container center">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
</body>
</html>
In Grid Layout,
1. The justify-content property aligns the entire grid along the inline (horizontal) axis within the grid container.
2. The align-content property aligns the entire grid along the block (vertical) axis within the grid container.
No comments:
Post a Comment