Grid

grid-auto-flow

grid-auto-flow: row (default)

CSS
.container {
  display: grid;
  grid-auto-flow: row
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9

grid-auto-flow: column

CSS
.container {
  display: grid;
  grid-auto-flow: column
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9

Setting Particular size

grid-auto-flow: row and particular size

CSS
.container {
  display: grid;
  grid-auto-flow: row
  grid-auto-rows: 100px;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9

grid-auto-flow: column and particular size

CSS
.container {
  display: grid;
  grid-auto-flow: column
  grid-auto-columns: 100px;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9

grid-auto-flow: row and particular column size

CSS
.container {
  display: grid;
  grid-auto-flow: row
  grid-auto-columns: 100px;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9

grid-auto-flow: column and particular row size

CSS
.container {
  display: grid;
  grid-auto-flow: column
  grid-auto-rows: 100px;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9

grid-auto-flow and grid-template

CSS
.container {
  display: grid;
  height: 800px;
  grid-auto-flow: row;
  grid-template-columns: repeat(3, 1fr);
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9
CSS
.container {
  display: grid;
  height: 800px;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, 1fr);
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9

Setting different Sizes

CSS
.container {
  display: grid;
  height: 800px;
  grid-auto-flow: row;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px 200px 1fr;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9
CSS
.container {
  display: grid;
  height: 800px;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, 1fr);
  grid-auto-columns: 100px 200px 1fr;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9

without template

CSS
.container {
  display: grid;
  height: 800px;
  grid-auto-flow: row;
  grid-auto-columns: 100px 200px 1fr;
  grid-auto-rows: 100px 200px 1fr;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9
CSS
.container {
  display: grid;
  height: 800px;
  grid-auto-flow: column;
  grid-auto-rows: 100px 200px 1fr;
  grid-auto-columns: 100px 200px 1fr;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9

See How behave

CSS
.container {
  display: grid;
  height: 800px;
  grid-auto-flow: row;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  justify-items: end;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9
CSS
.container {
  display: grid;
  height: 800px;
  grid-auto-flow: column;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  justify-items: end;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9