How To Use CSS Grid Properties to Justify and Align Content and Items?

In web development, achieving a responsive and well-organized layout is crucial. CSS Grid has emerged as a powerful tool to simplify the creation of complex layouts. With CSS Grid properties, you can effortlessly justify and align content and items within your web pages. In this article, we’ll explore the various aspects of CSS Grid and demonstrate how to use its properties to enhance layout design.

Section 1: Understanding CSS Grid

CSS Grid is a two-dimensional layout system that enables the creation of complex web layouts with rows and columns. It provides a more efficient and flexible alternative to traditional layout methods like floats and positioning.

Section 2: Basics of CSS Grid Properties

Let’s start with the basic CSS Grid properties:

1. display: grid;: This property establishes a grid container.
2. grid-template-columns and grid-template-rows: Define the size of columns and rows in the grid.
3. grid-gap: Sets the gap between rows and columns.

Example 1: Basic CSS Grid Setup

<style>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;  
  margin:50px;
  margin-top:300px;
  }
  .container div {
  border:#000 1px solid;
  text-align:center;
  background-color:#b2b2b2;
  height:100px;
  width :100px;
  color:#000;
  line-height:100px;
  }

</style>
<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Section 3: Justify and Align Content

Now, let’s explore how to justify and align content within the grid container.

1. justify-content: Aligns content along the horizontal axis.
2. Align-content: Aligns content along the vertical axis.

Example 2: Justify and Align Content

<style>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  justify-content: space-between;
  align-content: center;
  margin-top:30px;
}
  .container div {
  border:#000 1px solid;
  text-align:center;
  background-color:#b2b2b2;
  height:100px;
  width :100px;
  color:#000;
  line-height:100px;
  }

</style>
<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Section 4: Justify and Align Items

In addition to content, you can also justify and align-items within the grid.

1. Justify-items: Aligns items along the horizontal axis.
2. align-items: Aligns items along the vertical axis.

Example 3: Justify and Align Items

<style>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  justify-items: center;
  align-items: end;
  margin-top:50px;
}
  .container div 
  {
  border:#000 1px solid;
  text-align:center;
  background-color:#b2b2b2;
  height:100px;
  width :100px;
  color:#000;
  line-height:100px;
  }

</style>
<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Conclusion:

CSS Grid provides a comprehensive and efficient way to create responsive layouts easily. You can control your layout’s alignment and positioning by understanding and utilizing properties like justify-content, align-content, justify-items, and align-items. Experiment with these properties to find the best combination for your design needs.

In conclusion, CSS Grid is a valuable tool for modern web development, offering a more intuitive and powerful approach to layout design.