CSS 20 💻 grid-auto-columns, grid-auto-rows and grid-auto-flow properties

a - grid-auto-columns property
grid-auto-columns defines the default size for auto-placed columns in grid layout
It is useful when you want to specify a consistent width for all columns
This way you do not have to specify each column individually
It applies only to auto-placed grid items
not to items that are explicitly defined
values → length(px, cm), percentage(%), fr, minmax, fit-content,
 mix-content, max-content and auto
 grid-auto-columns: 200px; → defines the default column width to 200px;

b - grid-auto-rows property
grid-auto-rows defines the default size for auto-placed rows in grid layout
It is useful when you want to specify a consistent width for all rows
This way you do not have to specify each rows individually
It applies only to auto-placed grid items
not to items that are explicitly defined
values → length(px, cm), percentage(%), fr, minmax, fit-content,
 mix-content, max-content and auto
 grid-auto-rows: 200px; → defines the default column height to 50px;
 
c - grid-auto-flow property
grid-auto-flow specifies how auto-placed items are placed in the grid
It can have one or two values that specify row/column and grid density
values → row, column, dense (if one values used)
row dense, column dense (if two values are used)
row → ensures that auto-placed items are placed in a row-wise manner
column → ensures that auto-placed items are placed in a column-wise manner
dense → fills in the holes in the grid
if is not used row or columned  , then row is the default, If is not used dense then it does not fill holes
grid-auto-flow: row dense; → fill the container's size and minimize the number of rows used