What is the difference between align-items vs. align-content in Grid Layout?
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:
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
andjustify-items
propertiesGrid items can be aligned in the inline dimension by using the
justify-self
property on the grid item orjustify-items
property
on the grid container.10.4. Column-axis Alignment: the
align-self
andalign-items
propertiesGrid items can also be aligned in the block dimension (perpendicular
to the inline dimension) by using thealign-self
property on the
grid item oralign-items
property on the grid container.10.5. Aligning the Grid: the
justify-content
andalign-content
propertiesIf 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
andalign-content
properties on the grid
container.(emphasis added)
What is difference between justify-self, justify-items and justify-content in CSS grid?
To answer your questions:
1
As reiallenramos mentioned, "The justify-self and justify-items properties are not implemented in flexbox. This is due to the one-dimensional nature of flexbox, and that there may be multiple items along the axis, making it impossible to justify a single item. To align items along the main, inline axis in flexbox you use the justify-content property." - MDN
2-3
This screen shot from W3 does an excellent job of showing what they do and the differences between them.
Good To Knows:
For more information and example, I would suggest you check out:
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
- https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
- https://www.smashingmagazine.com/2017/12/grid-inspector/
And for some inspiration:
- https://www.smashingmagazine.com/2017/10/css-grid-challenge-2017-winners/
justify-content works differently in Flex and Grid layouts
In flex layout, the justify-content
property distributes free space in the container between or around flex items (depending on the value).
8.2. Axis Alignment: the
justify-content
propertyThe
justify-content
property aligns flex items along the main axis
of the current line of the flex container. ... Typically it helps
distribute extra free space leftover when either all the flex items on
a line are inflexible, or are flexible but have reached their maximum
size.
In grid layout, the justify-content
property distributes free space in the container between or around grid columns (depending on the value).
Note the difference with flex: Here, justify-content
aligns grid columns, not grid items.
10.5. Aligning the Grid: the
justify-content
andalign-content
propertiesIf 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
andalign-content
properties on the grid
container.
Here are the grid column tracks in your layout...
...without justify-content: space-between
:
...and with justify-content: space-between
:
Here's a related post that may help with further understanding:
- What is the difference between align-items vs. align-content in Grid Layout?
Related Topics
Css3 Animation Not Working in Safari
Sass Variable in CSS Calc() Function
Svg Use Element and :Hover Style
How to Increase the Gap Between Text and Underlining in Css
Transition of Background-Color
How to Use Svg as Content in a Pseudo Element ::Before or ::After
Smallest Data Uri Image Possible For a Transparent Image
How to Set Border'S Thickness in Percentages
Content Url Does Not Display Image on Firefox Browser
:Not() Selector Not Behaving the Same Between Safari and Chrome/Firefox
Drop Shadow For Png Image in Css
How to Remove the Outline Around Hyperlinks Images
Why Does 'Overflow: Auto' Clear Floats? And Why Are Clear Floats Needed
Ie8 Display Inline-Block Not Working
How to Make a Footer Fixed in the Page Bottom