What is the difference between align-items vs. align-content in Grid Layout?

by

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)

More Related Contents:

  1. Make a div span two rows in a grid
  2. Prevent content from expanding grid items
  3. Why aren’t my grid-template-areas with ASCII art not working?
  4. Aligning grid items across the entire row/column (like flex items can)
  5. Position deeply nested elements in a higher level grid container
  6. Align child elements of different blocks
  7. Browser support for CSS Grid
  8. The difference between percentage and fr units
  9. Areas covered by Flexbox which are difficult or impossible to achieve with Grid
  10. Why are CSS named grid areas not in quotes?
  11. What is the difference between auto-fill and auto-fit?
  12. A grid layout with responsive squares
  13. Create a Masonry grid with flexbox (or other CSS)
  14. Why percentage value within grid-gap create overflow in CSS grid?
  15. Using CSS transitions in CSS Grid Layout
  16. CSS Grid – Auto height rows, sizing to content
  17. How to make a column span full width when a second column is not there? (CSS Grid)
  18. Can I have a varying number of columns per row in a CSS grid?
  19. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  20. Percentage padding / margin on grid item ignored in Firefox
  21. CSS Grid auto fit with max-content
  22. Setting different lengths for grid gaps in CSS Grid
  23. How do you collapse unused row in a CSS grid?
  24. Can I make a CSS grid with dynamic number of rows or columns?
  25. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  26. Is a button allowed to have display:grid? [duplicate]
  27. How is “grid-template-rows: auto auto 1fr auto” interpreted?
  28. How can I force this CSS grid to wrap to a new line without specifying minmax sizes?
  29. grid-area does not seem to work with the attr function, is this by design?
  30. minmax fails (invalid property value)

Leave a Comment