Aligning Content in CSS: Introduction to Grid - Part 4

Introduction

In today’s blog, we’re finally diving into the properties related to align-content. These include justify-items, align-items, place-items, justify-content, align-content, and place-content. Let’s get started!

Initial Setup

Here is our initial code. As you can see, we’ve divided the container into two equal-height and equal-width rows and columns. The container’s background color is white, each child element has a grey background, and the images are set at different sizes.

.container {
    display: grid;
    width: 300px;
    margin: 1em 0;
    height: 300px;
    grid-template: 1fr 1fr / 1fr 1fr;
    border: 2px dotted #ebebeb;
    background-color: white;
}

.container > div {
    outline: 1px dotted;
    background-color: grey
}

<div class="container">
    <div data-index="1"><img src="https://raw.githubusercontent.com/trevortylerlee/n1/main/n1.jpeg" width="128" height="86"></div>
    <div data-index="2"><img src="https://raw.githubusercontent.com/trevortylerlee/n1/main/n1.jpeg" width="96" height="128"></div>
    <div data-index="3"><img src="https://raw.githubusercontent.com/trevortylerlee/n1/main/n1.jpeg" width="128" height="96"></div>
    <div data-index="4"><img src="https://raw.githubusercontent.com/trevortylerlee/n1/main/n1.jpeg" width="128" height="96"></div>
</div>

justify-items

justify-items defines how grid items are aligned horizontally, whether stretched, or aligned to the left, center, or right. The syntax is as follows:

.container {
    justify-items: stretch | start | end | center;
}

The available values are:

• stretch: stretches the item to fill the horizontal space.

• start: The item shrinks to fit its content and aligns with the left side of the grid (assuming the document flow direction remains unchanged).

• end: The item shrinks to fit its content and aligns with the right side of the grid (assuming the document flow direction remains unchanged).

• center: The item shrinks to fit its content and centers itself horizontally within the grid area (assuming the document flow direction remains unchanged).

align-items

align-items specifies the vertical alignment of grid items, determining whether they are stretched vertically or aligned to the top, center, or bottom. The syntax is as follows:

.container {
    align-items: stretch | start | end | center;
}

Among them (assuming the document flow direction is the default for web pages):

• stretch: The default value, stretched, which causes the item to fill the vertical space.

• start: The grid item’s vertical size shrinks to match the size of its content, aligned to the top grid line.

• end: The grid item’s vertical size shrinks to match the size of its content, aligned to the bottom grid line.

• center: The grid item’s vertical size shrinks to match the size of its content, and it is vertically centered within the current grid area.

place-items

The place-items property combines the align-items and justify-items properties into a single declaration. Its syntax is as follows:

.container {
    place-items: <align-items> <justify-items>?;
}

Here, the order is align-items first, and justify-items second. The initials ‘a’ and ‘j’—‘a’, ‘j’, ‘a’, ‘j’, ‘a’, ‘j’—are repeated in pronunciation.

This type of grid alignment, with vertical first and horizontal second, makes it easier to remember.

justify-content

justify-content specifies the horizontal distribution of grid items. This property only takes effect when the total width of the grid is less than the width of the grid container. For example, when the grid items have fixed widths, resulting in leftover space. For instance:

.container {
    display: grid;
    width: 300px;
    grid-template: 100px 100px/100px 100px;
}

At this point, with 100px of leftover space in both the horizontal and vertical directions, the justify-content property comes into play here.

The syntax is as follows:

justify-content: stretch | start | end | center | space-between | space-around | space-evenly;

Among them:

• stretch: The default value. The width fills the grid container. The stretch effect only works if the grid’s target size is set to auto. If the width is fixed, stretching won’t be applied.
• start: The default value. A logical CSS property, dependent on the document flow direction. By default, it aligns the content to the left.
• end: A logical CSS property, dependent on the document flow direction. By default, it aligns the content to the right.
• center: Aligns the content to the center.
• space-between: Aligns the content to both ends. “Between” refers to distributing the extra space only in the middle area between the elements. An abstract diagram can be used to illustrate this concept:

• space-around: “around” refers to surrounding. This means that each grid item will have equal space on both sides, with the spacing between the items being consistent. Visually, the empty space at the edges of the grid will be half the width of the space between the items. A diagram can help illustrate this concept:

• space-evenly: “Evenly” refers to equal distribution. This means that visually, the empty space on both sides of each grid item is identical. A diagram can help illustrate this concept:

difference xxx-items and xxx-content

xxx-content is used to control the alignment of content within the entire grid container (i.e., the whole grid). It defines how the grid content is aligned along the main axis, which is usually the horizontal axis (or row direction).

xxx-items used to control the alignment of a single grid item within its own cell.

align-content

align-content can be seen as a complementary property to justify-content. While justify-content controls the distribution of grid items in the horizontal direction, align-content specifies how the rows of grid elements are distributed vertically. If all grid items fit in a single row, the align-content property has no effect.

The syntax is as follows:

align-content: stretch | start | end | center | space-between | space-around | space-evenly;

The options are as follows:

• stretch: The default value. Each row of grid items is stretched proportionally to fill the available space. For example, if there are two rows, each row’s height will take up half of the available vertical space.
• start: A logical CSS value, related to the document flow direction. It aligns items at the top.
• end: A logical CSS value, related to the document flow direction. It aligns items at the bottom.
• center: Items are vertically aligned at the center.
• space-between: The items are aligned at the top and bottom edges, with any remaining space evenly distributed between the rows.
• space-around: Each row of items has equal, non-overlapping space on top and bottom.
• space-evenly: Each row of items is spaced equally, with even vertical spacing between them.

place-content

place-content lets you combine the align-content and justify-content properties into a single CSS declaration, commonly known as shorthand. The syntax is as follows:

.container {
    place-content: <align-content> <justify-content>?;
}

The order here is align-content first, followed by justify-content.

Compare to Flex

By now, you should have noticed that the properties in grid are very similar to those in flex. So when should you use grid? You can refer to the table below to help guide your decision.