How to Create a Grid Layout Using CSS

By default, the grid items flows horizontally, meaning they will fill the first row, and if there is insufficient space, the remaining items will be moved to the second row, and so on.

This is why we defined the grid columns first, and the rows were created automatically by the browser.

However sometimes, you may only know how many rows you want, and you need the browser to create the columns automatically.

In this case, you can change the flow direction of the grid items by setting grid-auto-flow to column.

.container {
  display: grid;
  grid-auto-flow: column;
}

And then, you can create grid rows using grid-template-rows, and this time, the number of values corresponds to the number of rows, and each value determine the row height.

The columns, on the other hand, are created automatically. You can use grid-template-columns to set the column width, but the number of values does not make a difference.

.container {
  display: grid;
  grid-auto-flow: column;
 
  grid-template-rows: 100px 100px;
  grid-template-columns: 100px 200px 300px;
}