𝗖𝗦𝗦 𝗚𝗿𝗶𝗱 𝘃𝘀 𝗙𝗹𝗲𝘅𝗯𝗼𝘅
CSS 레이아웃과 씨름하는 것을 멈추세요.
예전에는 Flexbox로 깨진 레이아웃을 수정하느라 몇 시간씩 허비하곤 했습니다. 아이템들을 한 줄로 배치하려고 하면, 마지막 아이템이 화면 전체로 늘어나 버리곤 했죠. 보기에도 좋지 않았습니다. 마진(margin)을 조절하거나 온갖 편법을 써봤지만 아무것도 통하지 않았습니다.
그러다 CSS Grid로 사고방식을 전환했습니다.
차이점은 간단합니다:
- Flexbox는 1차원 레이아웃을 위한 것입니다. 단일 행(row)이나 단일 열(column)에 사용하세요.
- CSS Grid는 2차원 레이아웃을 위한 것입니다. 행과 열을 동시에 제어해야 할 때 사용하세요.
Flexbox는 작은 작업을 위한 도구로, Grid는 페이지 전체 구조를 위한 도구로 생각하세요.
Flexbox의 함정: 갤러리에 Flexbox를 사용하면 모든 화면 크기에서 아이템이 완벽하게 정렬되지 않을 수 있습니다. 디자인의 리듬을 깨뜨리는 '고아(orphan)' 아이템이 생기기 일쑤입니다.
Grid를 통한 해결책: Grid를 사용하면 단 한 줄의 코드로 반응형 갤러리를 만들 수 있습니다.
다음 코드를 사용해 보세요: display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
이 코드는 브라우저에게 가능한 한 많은 250px 열을 배치하라고 지시합니다. 브라우저가 알아서 계산해 줍니다. 더 이상 추측할 필요도, 깨진 행 때문에 고민할 필요도 없습니다.
대시보드 예시: 사이드바, 메인 콘텐츠, 푸터가 있는 대시보드를 Flexbox로 만드는 것은 어렵습니다. 푸터를 전체 너비로 확장하기 위해 중첩된 컨테이너와 지저분한 코드가 필요한 경우가 많습니다.
Grid를 사용하면 트랙(tracks)을 한 번만 정의하면 됩니다: grid-template-columns: 250px 1fr; grid-template-rows: auto 1fr auto;
단 한 줄의 명령으로 푸터가 첫 번째 열부터 마지막 열까지 차지하도록 설정할 수 있습니다. 코드가 깔끔해지고 읽기 쉬워집니다.
조언:
• 헤더나 버튼의 간단한 정렬에는 Flexbox를 사용하세요. • 메인 페이지 레이아웃과 복잡한 갤러리에는 Grid를 사용하세요. • 레이아웃 문제를 해결하려고 단순히 컨테이너를 중첩하지 마세요. • 공간을 쉽게 분배하려면 fr 단위를 사용하세요.
오늘 바로 시도해 보세요. Flexbox로 만들었던 예전 컴포넌트를 가져와 CSS Grid로 다시 작성해 보세요. 코드는 더 짧아지고 레이아웃은 더 견고해지는 것을 경험하게 될 것입니다.