grid ( Auto Columns and Rows )

grid-box안에 item을 20개 만들어 두고

grid는 3 x 3으로 9칸만 정의해보자 그럼 나머지 11칸은 어떻게 될까?

나머지 11개는 아래(row)로 추가가 된다. 이 때 column은 적용이 되지만 row는 적용이 되지 않는다.

이때 grid-auto-rows라는걸 사용하면 된다.

즉 우리가 만든 grid보다 더 많은 content가 들어온다면 우리가 따로 rows를 추가로 지정해주지 않아도 자동으로줘서 row를 생성하는 것이다.

잘 적용된 것을 확인할 수가 있다. row크기는 처음 지정해준 크기와 다르게하면 다르게 나타나기에 같은 값으로 지정해 주는 것이 좋다. 

곰곰이 생각해보면 굳이 따로 rows를 지정해주지 않아도 상관없을 것 같기도 하다??

즉 grid-template-rows를 주지 않고 grid-auto-rows만 주는 것이다 한번 해보자. 다시해도 변함이 없다. 따라서 우리가 특정 열을 몇개까지 만들어라 ! 이렇게 지정해주지 않고 데이터가 들어오는 만큼 알아서 보여줄 때는 이렇게 해도 상관없을 것 같다. 

근데 여기서 기본적으로 아래(row)로 흘러가지만 반대로 옆(column)으로 흘러가게 할 수도 있다.

grid-auto-flow를 column로 주면 옆으로 흘러가게 된다. 나머지 것들만 옆으로 흘러가게 하는 것이 아니라 grid자체를 위에서 아래로 흐르게 만든다. ( 기존 row는 왼쪽에서 오른쪽으로 ) 그래서 아래 그림을 잘 보면 아래로 1 2 3 이렇게 커지게 되는 것을 알 수 있다. direction 자체를 바꿈

 

grid-auto-flow를 colum으로 주게되면 grid-template- rows를 정해주어야지 가로줄이 생성이 된다. 

row를 정해주지 않으면 계속 오른쪽으로만 가기 때문이다. 따라서 3줄을 정해준 뒤 grid-auto-columns의 크기 역시 100을 주고 grid-auto-flow도 column으로 주게되면 아래와 같이 3줄이 차게되면 오른쪽으로 흐르는 모습을 볼 수 있다.

만약 grid-auto-flow : row를 사용하고 싶다면 grid-template-rows를 정해주지 않아도 알아서 아래로 흐른다. 따라서 grid-auto-rows의 크기만 정해주면 되고,

 

반대로 만약 grid-auto-flow : flow를 사용하고 싶다면 grid-template-colums를 정해주지 않고 grid-auto-columns의 크기만 정해주면 알아서 나머지들을 오른쪽으로 정해진 크기만큼 흐르게 된다.