How css grid layout works

Question

I was wondering what the Css grid grid looks like. I thought I was getting close to figure it out until I tried it below.

I thought this would make element 5 of 3, since it does not have a position defined in the grid, but instead he went after step 3, what is the behavior behind it?

https://codepen.io/anon/pen/GOPvXO \

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper{
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px 50px;
}

.wrapper div{
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
}

.wrapper div:nth-child(1){
  background-color: blue; 
  grid-column-start: 1;
  grid-column-end: 3;
}
.wrapper div:nth-child(2){
  background-color: red;
}
.wrapper div:nth-child(3){
  background-color: green;
  grid-column-start: 2;
  grid-column-end: 3;
}
.wrapper div:nth-child(4){
  background-color: lightblue;
    grid-column-start: 2;
    grid-row-end: 4;
}
.wrapper div:nth-child(5){
  background-color: pink;
}
.wrapper div:nth-child(6){
  background-color: lightgreen;
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Run codeHide result

Answer 1

W3C docs and this article can help you understand why the grid works this way.

See how grid elements are placed according to 8.5 Grid Item Placement Algorithm in documents:

0. Creating anonymous grid elements

No anonymous elements - no mesh elements are generated

1. , .

4

grid-column-start: 2; /* second column, span 1 */
grid-row-end: 4;      /* third row, span 1 */

2. , .

, ,

3. .

3. , . 1,2 4 3, , , 3

4. .

"" :

( ), , .

: 1,2,3,5 6. - , 1 1. , :

• 1 ( ) 1, 1-2, 1.
• 2 ( ) 1, 3, 2 1, 3 .
• 3 ( ) 2, col 2, 2.
• 5 ( ) 2, 3, 3.
• 6 ( ), 3 3.

---

, 5 3, :

1: grid-auto-flow: dense;

3. - - 2.

6, 2.

html,
body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px 50px;
}

.wrapper div {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
}

.wrapper div:nth-child(1) {
  background-color: blue;
  grid-column-start: 1;
  grid-column-end: 3;
}

.wrapper div:nth-child(2) {
  background-color: red;
}

.wrapper div:nth-child(3) {
  background-color: green;
  grid-column-start: 2;
  grid-column-end: 3;
}

.wrapper div:nth-child(4) {
  background-color: lightblue;
  grid-column-start: 2;
  grid-row-end: 4;
}

.wrapper div:nth-child(5) {
  background-color: pink;
}

.wrapper div:nth-child(6) {
  background-color: lightgreen;
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Hide result

2: 3

, 3 1 , 4 :

• 1 ( ) 1, 1-2, 1.
• 2 ( ) 1, 3, 2 1, 3 .
• 5 ( ) 2, 1, 3 3, 2
• 6 ( ), 3.

html,
body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px 50px;
}

.wrapper div {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
}

.wrapper div:nth-child(1) {
  background-color: blue;
  grid-column-start: 1;
  grid-column-end: 3;
}

.wrapper div:nth-child(2) {
  background-color: red;
}

.wrapper div:nth-child(3) {
  background-color: green;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row: 2;
}

.wrapper div:nth-child(4) {
  background-color: lightblue;
  grid-column-start: 2;
  grid-row-end: 4;
}

.wrapper div:nth-child(5) {
  background-color: pink;
}

.wrapper div:nth-child(6) {
  background-color: lightgreen;
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Hide result