Unexpected behaviour of grid items using justify-content property

Question

in the css-tricks complete-guide-to-css-grid it describes the justify-content property as follows:

justify-content Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like px. In this case you can set the alignment of the grid within the grid container. This property aligns the grid along the inline (row) axis (as opposed to align-content which aligns the grid along the block (column) axis).

Im trying to wrap my head around how this works. If I have a grid container with width: 100% and grid items with fixed width width: 20px and I set the grid container to justify-items: start the grid items will, as expected justify to the start. If however, I set the grid container to `grid-template-columns: repeat(4, 1fr) then the items no longer justify to the start? even though the items are sized with non-flexible units?

According to the css-tricks description I would have expected them to justify to the start of the row axis?

.wrapper{
width: 100%;
height: 100vh;
}

.grid{
display: grid;
grid-auto-flow: column;
justify-content: start;
align-content: start;
width: 100%;
padding: 1em;
background-color: powderblue;
}

.grid.explicit{
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.grid__item{
width: 20px;
padding:0.6em;
background-color: lime;
}

<div class="wrapper">
Explicit columns
<pre>
grid-template-columns: 1fr 1fr 1fr 1fr;
</pre>
<div class="grid explicit">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>
Implicit columns
<div class="grid">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>

They are justified "start" within the grid cell width of 1fr. Since you have set a specific width (albeit in fr units) the grid-columns are what you have set and then the grid-items are aligned as directed within those cells. — Paulie_D
An Implicit grid cell has not defined width so they are just as wide as needed so the grid-item takes up the whole grid-cell. Thus no alignment. — Paulie_D

Temani Afif Temani Afif · Accepted Answer · 2020-12-16T22:11:03

From the specification

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.

So if any column is using 1fr, justify-content is useless.

To use easy words: You grid container contain tracks (columns) that are sized either based on grid-template-columns or automatically. When using 1fr 1fr 1fr 1fr You define 4 equal tracks taking all the available space. There is no free space so there is nothing to align because justify-content align the columns not the item inside them (that are equal to 20px).

When you don't define any size, the columns will get auto sized based on their content and in this case you will have tracks having their size equal to 20px and inside them items also equal to 20px. In this case, justify-content will align your columns.

Worth to note that the default alignment is stretch so in the second case if you omit the justify-content, your auto sized column will be stretched to fill all the space equally to have a similiar behavior as 1fr.

to better understand, here is some illustration:

.grid {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  margin: 1em;
  background-color: powderblue;
}

.grid__item {
  width: 20px;
  padding: 0.6em;
  background-color: lime;
}

4 equal columns
<div class="grid" style="grid-template-columns: 1fr 1fr 1fr 1fr">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>
4 equal columns having 100px width (we have free space)
<div class="grid" style="grid-template-columns: 100px 100px 100px 100px">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>

we align the items inside the columns
<div class="grid" style="grid-template-columns: 100px 100px 100px 100px;justify-items:center">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>
<div class="grid" style="grid-template-columns: 100px 100px 100px 100px;justify-items:end">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>
we move the columns to the end
<div class="grid" style="grid-template-columns: 100px 100px 100px 100px;
  justify-content: end;justify-items:end">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>
We make the column auto sized (nothing to align inside them)
<div class="grid" style="justify-items:center">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>
<div class="grid" style="justify-items:end">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>

Unexpected behaviour of grid items using justify-content property

1 Answers