올해 Josh Comeau의 글을 자주 보게 되는데 항상 퀄리티가 좋아서 만족스러웠는데 이번에도 그랬습니다. CSS로 레이아웃을 잡을 수 있는 CSS Grid를 인터렉티브로 직접 실행해보면서 이해할 수 있게 설명할 수 있는 가이드입니다.

기본적인 Grid의 구조부터 시작해서 행과 열을 지정하고 갯수가 늘어날 때 어떻게 동작하는지, 단위를 %로 했을 때와 fr로 했을 때 어떤게 다르게 동작하는지를 직관적으로 비교하면서 알 수 있게 설명해서 이해하기 좋고 중요 부분마다 자식 요소의 갯수에 따라 달리지는 것을 시각적으로 알수 있어서 이해하기가 좋습니다.

그외에 여분 공간에 대한 레이아웃이나 복잡한 레이아웃을 잡을 때 어떻게 CSS Grid를 활용할 수 있는지를 보여주어서 이해하기 좋습니다.

https://www.joshwcomeau.com/css/interactive-guide-to-grid/