HTML&CSS · December 20, 2023

Css Basic: justify-items

CSS Basics: justify-items

In CSS, the justify-items property is used to align grid items along the inline (row) axis within a grid container. It allows you to control the alignment of individual grid items within their respective grid cells.

Understanding Grid Layout

Before diving into the justify-items property, let's briefly understand the concept of CSS Grid Layout. CSS Grid Layout is a powerful two-dimensional layout system that allows you to create complex grid-based designs with ease.

A grid container is created by applying the display: grid; property to an element's CSS. This element becomes the parent container, and its direct children become grid items. The grid container is divided into rows and columns, forming a grid of cells where grid items are placed.

The justify-items Property

The justify-items property is used to align grid items along the inline (row) axis within their respective grid cells. It accepts various values:

  • start: Aligns items to the start of the grid cell (left-aligned for LTR languages).
  • end: Aligns items to the end of the grid cell (right-aligned for LTR languages).
  • center: Aligns items to the center of the grid cell.
  • stretch: Stretches items to fill the entire grid cell.

Let's take a look at an example:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
}

.grid-item {
  background-color: #f2f2f2;
  padding: 10px;
}

In the above example, we have a grid container with two columns. The justify-items: center; property aligns the grid items to the center of their respective cells. The 1fr value for grid-template-columns creates two equal-width columns.

Examples

Let's explore some practical examples to understand the usage of the justify-items property:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: start;
}

.grid-item {
  background-color: #f2f2f2;
  padding: 10px;
}

In this example, we have a grid container with three columns. The justify-items: start; property aligns the grid items to the start of their respective cells, resulting in a left-aligned layout.

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: end;
}

.grid-item {
  background-color: #f2f2f2;
  padding: 10px;
}

In this example, the justify-items: end; property aligns the grid items to the end of their respective cells, creating a right-aligned layout.

Conclusion

The justify-items property in CSS Grid Layout allows you to control the alignment of grid items along the inline (row) axis within their respective grid cells. By using values like start, end, center, or stretch, you can achieve different alignment effects.

With the power of CSS Grid Layout, you can create flexible and responsive grid-based designs. Understanding the justify-items property is essential for mastering grid layouts and creating visually appealing web pages.

For more information on CSS Grid Layout and other web hosting solutions, consider exploring Server.HK, a leading VPS hosting company that offers top-notch services for your website hosting needs.

You may also like...