13

I've read through A complete guide to Grid, but still confused with the differences between two sets of container properties, namely the "justify/align-items" vs. "justify/align-content".

My confusion revolves around the claim made by the author that the "-content" set are there because

Sometimes the total size of your grid might be less than the size of its grid container

I think this applies to both, not unique to the "-content" set.

Could someone help explain this? Preferably using some graphical illustration as examples.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Jinghui Niu
  • 990
  • 11
  • 28

1 Answers1

26

Let's start with clarifying the terminology:

Grid Container

The grid container is the overall container for the grid and grid items. It establishes the grid formatting context (as opposed to another formatting context, such as flex or block).

Grid

The grid is a group of intersecting vertical and horizontal lines that divides the grid container’s space into grid areas, which are boxes that contain grid items.

Grid Items

Grid items are boxes in a grid container that represent in-flow content (i.e., content that is not absolutely positioned).

Here's an illustration from the W3C:

enter image description here

The justify-content and align-content properties align the grid.

The justify-self, justify-items, align-self and align-items properties align the grid items.

With regard to the problem described in your question:

My confusion revolves around the claim made by the author that the "-content" set are there because: "Sometimes the total size of your grid might be less than the size of its grid container"

Well, you can see in the illustration that the grid is smaller than the grid container.

As a result, there is space remaining and the container is able to distribute this space to vertically center (align-content: center) and right-align (justify-content: end) the grid.

The extra space could also allow the grid to be spaced apart with values such as space-around, space-between and space-evenly.

However, if the grid size equaled the container size, then there would be no free space, and align-content / justify-content would have no effect.

Here's more from the spec:

10.3. Row-axis Alignment: the justify-self and justify-items properties

Grid items can be aligned in the inline dimension by using the justify-self property on the grid item or justify-items property on the grid container.

10.4. Column-axis Alignment: the align-self and align-items properties

Grid items can also be aligned in the block dimension (perpendicular to the inline dimension) by using the align-self property on the grid item or align-items property on the grid container.

10.5. Aligning the Grid: the justify-content and align-content properties

If the grid’s outer edges do not correspond to the grid container’s content edges (for example, if no columns are flex-sized), the grid tracks are aligned within the content box according to the justify-content and align-content properties on the grid container.

(emphasis added)

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Hi. Have gone around to this answer. Might I ask a question regarding this? So when you use the justify/align-items and self, are you changing the content inside the grid item? Like how data will appear inside a grid item? I'm still confused @@ – Tree Nguyen May 25 '17 at 13:55
  • @TreeNguyen, with `justify-items` / `align-items` (on the container) and `justify-self` / `align-self` (on the items (overriding the setting on the container)), you are aligning the *grid item* within the grid container. To align the content inside the grid item, you could make each item a flex container, and apply flex properties to the content. – Michael Benjamin May 25 '17 at 15:33
  • 1
    With `align-content` and `justify-content` you are aligning the grid rows and columns within the container's extra space, if any. Here's a demo you could play with: https://jsfiddle.net/k5ebsac2/ – Michael Benjamin May 25 '17 at 15:37