Alignment in CSS Grid Layout

Introduction to Alignment Features in Grid Layout

Alignment is one of the essential capabilities of web design that provides the ability to change the appearance and feel of a web page. In Grid Layout, which is one of the most attractive features of CSS for designing web pages, we can easily arrange items within a grid and perform alignment. This allows great possibilities for web designers to create diverse and modern layouts. In this section, we will take a closer look at the alignment capabilities in Grid Layout.

To better understand the alignment settings in CSS Grid, we will review key concepts like align-items and justify-items. These properties allow us to implement alignment settings on the main and cross axes.

Align-items and Their Role in Grid Layout

The align-items property allows us to specify how items are aligned along the cross axis. This property can accept values like 'start', 'end', 'center', or 'stretch', which each represent a specific alignment.

Note that these properties can be used for precise custom layouts in web design. For example, by using this feature, you can center your items within the center or corners of a grid.

Justify-items: Aligning Items on the Main Axis

The justify-items property is similar to align-items, but it applies to the main axis. In different layouts, it may be necessary to align items in a different manner, whether to the left, right, or center. This is where this property comes into play.

This alignment capability allows for greater variation in the design of modern web pages and enables designers to create more appealing and user-friendly layouts.

.grid-container {  
  display: grid;  
  grid-template-columns: repeat(3, 1fr);  
  align-items: center;  
  justify-items: center;  
}  
.grid-item {  
  background-color: lightgray;  
  padding: 20px;  
  border: 1px solid #ccc;  
}

Code Explanation:

.grid-container: This class defines the primary grid container where layout settings apply.
display: grid;: This line specifies that the element is displayed as a grid.
grid-template-columns: repeat(3, 1fr);: Using this property creates three equal columns.
align-items: center;: All items will be aligned in the center of the cross axis.
justify-items: center;: All items will be centered on the main axis.
.grid-item: This class applies to individual items in the grid.
background-color: lightgray;: The item's background color is set to light gray.
padding: 20px;: The internal space (padding) is set to 20 pixels.
border: 1px solid #ccc;: The items have a border that is one pixel solid and light gray.