Understanding the CSS Grid Auto Flow Property

The grid-auto-flow property in CSS is used to control the placement of grid items that are not explicitly placed using grid placement properties like grid-row-start, grid-column-start, etc. It specifies the algorithm to use when auto-placing items in the grid container.

The grid-auto-flow property can take four possible values:

row: This is the default value. It places grid items by filling each row in turn from left to right, and then moving down to the next row.
column: This value places grid items by filling each column in turn from top to bottom, and then moving to the next column.
dense: This value fills in holes in the grid caused by items with a larger span, by searching for an empty cell that is smaller than the item and placing it there. This may cause items to appear out of order, but can help to optimize the use of available space.
row dense or column dense: This value combines the behavior of row or columnwith dense. Grid items are placed in the specified direction, but empty cells are filled in as necessary to make the best use of available space.

grid-auto-rows

The grid-auto-rows property in CSS is used to set the size of rows in a grid container that are created implicitly, i.e., not defined explicitly using the grid-template-rows property

When you define a grid container using grid-template-rows, you can specify the size of each row explicitly, but what happens when you have more grid items than there are rows defined in grid-template-rows? In this case, new rows are created implicitly to accommodate the additional grid items, and their size is determined by the value of grid-auto-rows.

The grid-auto-rows property can take a length, a percentage, or the minmax() function, which specifies a minimum and maximum size for the rows. You can also use the auto value, which sets the row size to the height of its content.

grid-auto-columns

It is used to set the default size of columns in a grid container that are created implicitly, i.e., not defined explicitly using the grid-template-columns property

When you define a grid container using grid-template-columns, you can specify the size of each column explicitly, but what happens when you have more grid items than there are columns defined in grid-template-columns? In this case, new columns are created implicitly to accommodate the additional grid items, and their size is determined by the value of grid-auto-columns.

The grid-auto-columns property can take a length, a percentage, or the minmax() function, which specifies a minimum and maximum size for the columns. You can also use the auto value, which sets the column size to the width of its content.

Here's an example:

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="grid-auto-flow.css">
</head>
<body>
  <div class="container">
    <div class="grid-item box-1">Box-1</div>
    <div class="grid-item box-2">Box-2</div>
    <div class="grid-item box-3">Box-3</div>
    <div class="grid-item box-4">Box-4</div>
    <div class="grid-item box-5">Box-5</div>
    <div class="grid-item box-6">Box-6</div>
    <div class="grid-item box-7">Box-7</div>
    <div class="grid-item box-8">Box-8</div>
    <div class="grid-item box-9">Box-9</div>
  </div>
</body>
</html>

grid-auto-flow.css :

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;900&display=swap');

*{
  margin: 0;
  padding: 0;
  font-family: 'Rubik', sans-serif;
  box-sizing: border-box;
}

.container{
  border:5px solid black;
  margin: 20px;
}

.grid-item{
  color:white;
  font-size: 18px;
  padding: 16px;
  text-align: center;
}

.box-1{background-color: #1abc9c;}
.box-2{background-color:#3498db;}
.box-3{background-color: #2ecc71;}
.box-4{background-color: #9b59b6;}
.box-5{background-color:#34495e;}
.box-6{background-color:#2980b9;}
.box-7{background-color:#e74c3c;}
.box-8{background-color: #d35400;}
.box-9{background-color:#2c3e50;}

/**-----------------------------------------------*/

.container{
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: 100px;
   grid-auto-flow: column; 
   grid-auto-column: 100px;
}

The * selector applies a set of default styles to all elements on the page, including setting the font family to 'Rubik', sans-serif and using box-sizing: border-box to include padding and border widths in element sizes.

The CSS grid is set up using the .container class. The display: grid property specifies that the container is a grid container, and the grid-auto-flow property sets the flow of the implicit grid items to rows. The grid-auto-rows property sets the default height for implicit rows to 100 pixels.

The grid-auto-flow property is set again with a value of column, which changes the flow of the implicit grid items to columns. The grid-auto-columns property sets the default width for implicit columns to 100 pixels.

Together, these properties create an auto-generated grid with rows and columns that are each 100 pixels wide and tall. Any extra items that do not fit in the first row or column will be added to subsequent rows or columns as necessary.