• grid-auto-columns
• grid-auto-rows
• grid-auto-flow

이런 grid가 있다고 하자. 근데 만약에 16보다 더 많은 요소들이 나열된다고 가정해보자!

우리는 번호가 16인 요소까지는 만들거라고 예상했으나, 그 이후에 만들어지는 요소들은 예상치 못했기 때문에 이렇게 크기 없이 쭉 늘어진 것을 볼 수 있을 것이다. 우리는 그렇기 때문에 예상치 못하게 생겨나는 요소들의 크기를 지정해주기 위해 grid-auto-rows:350px;를 해줄 것이다.

그럼 사진처럼 16뒤에 생겨난 요소들은 자동적으로 350px로 맞춰진다!

헉 그러면 나는 1 2 3 4 가로 순서로 말고 세로 순서로 세워진 걸 보고 싶은데 어쩌지? 우리는 그럴때 grid-auto-flow를 이용해 grid-auto-flow:column으로 설정하면 된다.

그러면 이렇게 flow가 column으로 바뀐다. 그럼 만약에 16외에 더 생겨나는 요소들은 또 어떻게 조정하지?하면 grid-auto-columns:350px를 이용해 자동으로 크기를 조절해주면 된다.