The justify-content property aligns the entire grid along the inline axis (i.e., horizontally) within the grid container. It affects the positioning of the grid items as a whole relative to the container's available space.
Following are the possible values for the justify-content property in a Grid layout.
1. start: Aligns the grid items to the start of the container.
2. end: Aligns the grid items to the end of the container.
3. center: Centers the grid items within the container.
4. stretch: Stretches the grid items to fill the container (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.
6. space-around: Distributes the grid items evenly with equal space around each item, meaning there will be half the space on either side of the first and last items.
7. space-evenly: Distributes the grid items evenly with equal space between them, including before the first item and after the last item.
justify-content.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>justify-content in CSS Grid</title> <style> h1{ font-size: 1.1em; } .grid-container { display: grid; grid-template-columns: repeat(3, 100px); grid-gap: 10px; height: 8vh; width: 40vw; border: 2px solid black; margin: 20px; } .start { justify-content: start; } .end { justify-content: end; } .center { justify-content: center; } .space-between { justify-content: space-between; } .space-around { justify-content: space-around; } .space-evenly { justify-content: space-evenly; } .grid-item { background: #4CAF50; color: white; padding: 20px; text-align: center; } </style> </head> <body> <h1>justify-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>justify-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>justify-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> <h1>justify-content: space-between;</h1> <div class="grid-container space-between"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> </div> <h1>justify-content: space-around;</h1> <div class="grid-container space-around"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> </div> <h1>justify-content: space-evenly;</h1> <div class="grid-container space-evenly"> <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