Flexbox 는 사용하지말고 무조건 Grid 만 사용하자

항상 html 에서 레이아웃을 만들때 1D 형태를 쓰게되면 Flexbox 를 사용해야한다라는 강박관념이 있었지만,

1D 도 Grid 가 우월하다.

이에 관해 많은 검색을 해보았는데,

다른 이들도 Grid 가 할수없는 레이아웃이 필요하지않은 이상은 1D 도 Grid 를 default 로 사용하라고 권장한다.

 

https://www.reddit.com/r/web_design/comments/7uxldi/should_i_be_using_a_css_grid_or_flexbox_or_a/

Grid 가 Flexbox 보다 압도적으로 뛰어난 점은 자식 요소의 css 작성을 줄여준다는것이다.

대부분의 경우 자식 요소에서 아무것도 작성하지않아도 될때가 많다.

반면 Flexbox 는 자식 요소에서 무언가를 굉장히 많이 해주어야한다. (어디에 위치할것인지, width 와 height 등등.. flex-grow 속성등...)

자식 요소에서 무언가를 해야한다는것은 재사용성있는 컴포넌트를 만들어내고자할때, 자식에게 또다른 props 가 전달되어야하는 귀찮음을 만들어낸다.