CodeJackpot - justify-items

justify-items

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML (Hypertext Markup Language). CSS provides a wide range of properties to style and layout HTML elements. One such property is justify-items.

justify-items is a CSS property that defines how the content of a grid item is aligned along the inline (row) axis within the grid area. It applies to grid containers and takes one of the following values:

start: aligns the content to the start of the grid area (left for LTR languages, right for RTL languages).
end: aligns the content to the end of the grid area (right for LTR languages, left for RTL languages).
center: aligns the content to the center of the grid area.
stretch: stretches the content to fill the entire grid area.
baseline: aligns the content to the baseline of the first line of text within the grid area.

The default value of justify-items is stretch, which means that the content will be stretched to fill the entire grid area.

Examples

Let's take a look at some examples to understand how justify-items works:

Example 1: Using `justify-items: start`

In this example, we have a grid container with two grid items. We have set justify-items: start on the container, which aligns the content of the grid items to the start of the grid area.

  
    <div class="grid-container" style="display: grid; grid-template-columns: 1fr 1fr; justify-items: start;">
      <div class="grid-item">Item 1</div>
      <div class="grid-item">Item 2</div>
    </div>

The output of the above code will look like this:

Item 1

Item 2

Example 2: Using `justify-items: end`

In this example, we have set justify-items: end on the grid container, which aligns the content of the grid items to the end of the grid area.

  
    <div class="grid-container" style="display: grid; grid-template-columns: 1fr 1fr; justify-items: end;">
      <div class="grid-item">Item 1</div>
      <div class="grid-item">Item 2</div>
    </div>

The output of the above code will look like this:

Item 1

Item 2

Example 3: Using `justify-items: center`

In this example, we have set justify-items: center on the grid container, which aligns the content of the grid items to the center of the grid area.

  
    <div class="grid-container" style="display: grid; grid-template-columns: 1fr 1fr; justify-items: center;">
      <div class="grid-item">Item 1</div>
      <div class="grid-item">Item 2</div>
    </div>

The output of the above code will look like this:

Item 1

Item 2

Example 4: Using `justify-items: stretch`

In this example, we have set justify-items: stretch on the grid container, which stretches the content of the grid items to fill the entire grid area.

  
    <div class="grid-container" style="display: grid; grid-template-columns: 1fr 1fr; justify-items: stretch;">
      <div class="grid-item">Item 1</div>
      <div class="grid-item">Item 2</div>
    </div>

The output of the above code will look like this:

Item 1

Item 2

Example 5: Using `justify-items: baseline`

In this example, we have set justify-items: baseline on the grid container, which aligns the content of the grid items to the baseline of the first line of text within the grid area.

  
    <div class="grid-container" style="display: grid; grid-template-columns: 1fr 1fr; justify-items: baseline;">
      <div class="grid-item">Item 1</div>
      <div class="grid-item">Item 2</div>
    </div>

The output of the above code will look like this:

Item 1

Item 2

Conclusion

justify-items is a useful CSS property that allows you to align the content of grid items along the inline (row) axis within the grid area. By using the different values of justify-items, you can control the alignment of the content and create visually appealing layouts.

References

Share via:

Activity