CSS, grid layout vs flex layout

최신 css spec에는 grid layout과 flex layout 이 소개 되었다. 그런데 언제 어떤것을 써야 할까?

flex layout은 빈공간을 다루거나, 일정한 사이즈의 component 로 비일정한 사이즈의 component를 채울때 유용하다. 흔히 예를 드는 것은 사진 앨범과 같은 레이 아웃이다. 이런 레이아웃에서는 내용이 늘어나는 것에 대응할수 있도록 외부 사이즈가 늘어날때에 유용하다. 즉 블로그와 같이 아래로 무한정 늘어날수 있는 문서에 적합하다.

반면 grid layout은 비일정한 사이즈의 component 로 일정한 사이즈의 component를 채울떄 유용하다. 즉 한 화면 내를 채우거나, 특정 영역을 나누어 쓰거나 할때에 유리하다. 어찌보면 flex의 반대 개념에 가깝다. 따라서 https://gitter.im 와 같은 채팅 프로그램을 만들때는 grid layout이 유리하다.