저자는 Flexbox만을 사용하여 복잡한 관리자 대시보드 레이아웃을 만드는 데 어려움을 겪었으며, Flexbox의 일차원적인 접근 방식이 이차원적인 요구 사항에는 부적합하다는 것을 발견했습니다. 이러한 좌절감으로 인해 CSS Grid를 발견하게 되었는데, Grid는 정확한 행 및 열 기반 레이아웃에 탁월합니다. 저자는 Flexbox와 Grid가 경쟁하는 도구가 아니라 상호 보완적인 도구임을 강조합니다. Flexbox는 내비게이션 바나 버튼 그룹과 같이 단일 축 정렬에 이상적이며, Grid는 복잡한 이차원 구조에 완벽합니다.저자는 사이드바, 헤더, 메인 콘텐츠, 푸터로 구성된 관리자 대시보드의 전체 구조를 정의하기 위해 Grid를 사용하는 예시를 제공합니다. 그런 다음 항목을 중앙에 정렬하고 작은 화면에서 효율적으로 줄 바꿈하는 반응형 내비게이션 바를 통해 Flexbox의 강점을 보여줍니다. Flexbox에서 피해야 할 함정은 콘텐츠 크기에 맞춰져야 하는 요소에 flex: 1을 과도하게 사용하는 것입니다. 저자는 미디어 쿼리 없이 자동으로 열을 조정하는 적응형 제품 카탈로그를 통해 Grid의 강력함을 보여줍니다. Grid에서 흔히 저지르는 실수는 항목에 대해 box-sizing: border-box를 잊는 것입니다. 각 도구를 언제 사용해야 하는지 이해하면 CSS로 인한 좌절감을 줄이고 개발자가 기능 구축에 집중할 수 있습니다. 페이지 구조를 위해 Grid를 사용하고 구성 요소 정렬을 위해 Flexbox를 결합하는 것은 강력한 접근 방식을 제공합니다. 저자는 독자들이 Grid를 사용하여 Flexbox 구성 요소를 재설계함으로써 실험해 보도록 권장합니다.