수평으로 scroll 가능한 Grid 만들기

이 부분이 작업할때마다 매번 해깔려서 다시 정리해놓으려한다.

<div class='parent'>

    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>

</div>

위와 같은 상황에서, grid 를 사용하면 자식은 전혀 건들지않고, 부모의 css 에서

자식의 넓이를 결정할수있다.

.parent {

  height: 100%; /* 반드시!! 안하면 자식이 안줄어서 y 스크롤바 생김 */

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 5rem; /* 자식 넓이 */
  overflow: auto;

}

이렇게만 하면 자식의 css 는 전혀 설정할 필요없다.

위의 코드를 보다시피, 반드시 height 를 100% 로 해줘야한다.

이는 자식의 height 로 inherit 되기때문이다.

부모의 height 이 설정되지않은 경우,

scroll-bar 가 생긴만큼 자식이 줄어야하는데, 자식이 줄지않아 y축 scroll bar 가 생성되어버린다.