Can we say that the `justify-items` property overwrites the column widths defined by the `grid-template-columns` property?


#1

Question

Can we say that the justify-items property overwrites the column widths defined by the grid-template-columns property?

Answer

No, justify-items does not affect the widths of our grid columns. However, it does affect the widths of our grid items within our columns. For example, say we apply the following declarations applied to a grid container: grid-template-columns: 1fr 1fr 1fr 1fr; , justify-items: center;. In this case, we will have a grid with 4 columns of equal width. Each grid item will only be as wide as it’s content and it will be centered within a grid column. If we remove the justify-items: center; declaration or use the justify-items: stretch; declaration instead, the width of our columns will stay the same. However, the width of each grid item will stretch to match the entire width of each column.

Note, declaring the width property on a grid item will overwrite the widths determined by the justify-items property.