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

20 – grid-auto-columns, grid-auto-rows and grid-auto-flow properties

<div class="grid-container">
    <div class="cell">Auto-Placed Item 1 (200px)</div>
    <div class="cell">Auto-Placed Item 2 (200px)</div>
    <div class="cell">Item with different content</div>
</div>
<div class="grid-container-rows">
    <div class="cell">Auto-Placed Item 1 (50px)</div>
    <div class="cell">Auto-Placed Item 2 (50px)</div>
    <div class="cell">Item with different content</div>
</div>
<div class="grid-container-flow">
    <div class="cell">Item 1</div>
    <div class="cell">Item 2</div>
    <div class="cell">Item 3</div>
    <div class="cell">Item 4</div>
    <div class="cell">Item 5</div>
    <div class="cell">Item 6</div>
</div>

.grid-container {
    display: grid;
    grid-template-rows: 50px auto 70px;
    grid-auto-columns: 200px;
}

.cell {
    border: 1px solid black;
    padding: 10px;
}

.grid-container-rows {
    display: grid;
    grid-template-columns: 200px auto;
    grid-auto-rows: 50px;
}

.grid-container-flow {
    display: grid;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(2, 200px);
    grid-auto-flow: row dense;
}