🌱 기초 프론트엔드
Grid란 무엇인가요?
쉽게 이해하기
바둑판을 떠올려보세요. 가로줄과 세로줄이 만나서 정사각형 칸들이 생기죠. CSS Grid는 웹페이지를 이런 바둑판처럼 나눠서, 원하는 칸에 콘텐츠를 배치할 수 있게 해줘요. 신문 지면 레이아웃을 짜듯이 자유롭게 구성할 수 있어요.
핵심 정리
CSS Grid는 2차원 레이아웃을 만드는 현대적인 방법이에요.
자세히 알아보기
CSS Grid는 웹페이지를 격자 형태로 나눠서 레이아웃을 만드는 기술이에요. Flexbox가 한 줄(가로 또는 세로)로 요소를 배치한다면, Grid는 가로와 세로를 동시에 다뤄서 복잡한 레이아웃도 쉽게 만들 수 있어요.
실무에서는 주로 전체 페이지 레이아웃을 잡을 때 Grid를 써요. 예를 들어 헤더, 사이드바, 메인 콘텐츠, 푸터를 배치할 때 Grid를 쓰면 코드가 훨씬 간결해져요. 갤러리나 카드 목록처럼 여러 요소를 균등하게 배치할 때도 유용하죠.
Grid의 장점은 반응형 디자인을 만들 때 특히 빛을 발해요. 화면 크기에 따라 열의 개수를 자동으로 조절하거나, 요소의 배치 순서를 바꾸는 것도 쉬워요. 예전에는 복잡한 계산이 필요했던 레이아웃도 Grid를 쓰면 몇 줄의 코드로 해결돼요.
모던 웹사이트를 만든다면 Grid를 이해하는 건 필수예요. 특히 대시보드나 관리자 페이지처럼 복잡한 레이아웃이 많은 프로젝트에서는 Grid 없이는 개발이 어려울 정도예요.