jonbeo 님의 블로그

지금까지 Flexbox로 멋진 정렬과 반응형 레이아웃을 만들었다면,이제는 2차원(행 + 열) 레이아웃을 더 강력하게 다룰 수 있는CSS Grid의 차례입니다. Flex가 “흐름 기반”이라면,Grid는 “정해진 틀 기반”입니다.그만큼 레이아웃 설계가 더 직관적이고 강력해져요! ✅ display: grid란?.container { display: grid;} 이 한 줄로 Grid 컨테이너가 만들어집니다.그리고 이 안에 있는 자식 요소들은 **행(row)과 열(column)**을 기준으로 정렬됩니다. 🧩 기본 속성 정리속성설명grid-template-columns열(column) 개수 및 너비 설정grid-template-rows행(row) 개수 및 높이 설정gap셀 사이 간격 (row + column 동..

웹 레이아웃을 만들다 보면 display: flex와 display: grid,둘 중에 어떤 걸 써야 할지 고민될 때가 많죠?둘 다 정말 강력한 CSS 레이아웃 도구지만,방식이 완전히 다르고, 잘 쓰면 작업 효율이 확 달라져요.이번 글에서는 Flexbox와 CSS Grid의 차이점, 언제 어떤 상황에서 쓰면 좋은지 쉽게 정리해볼게요!✅ 둘 다 레이아웃 도구예요! 그런데 구조가 달라요항목FlexboxGrid정렬 방식1차원(한 줄 또는 한 열)2차원(행과 열 동시에)사용 목적콘텐츠 흐름대로 정렬정확한 영역 배치배치 기준아이템 순서 중심위치 중심 (그리드 영역 지정)대표 용도메뉴바, 버튼 정렬, 카드 나열 등전체 페이지 레이아웃, 포털형 구성 등 🧭 Flexbox가 잘 어울리는 상황은?Flexbox는 콘텐츠..