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.