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 동..

Flexbox를 쓰다 보면 "가운데 정렬은 어떻게 하지?", "아이템을 양쪽에 나눠서 정렬하고 싶어!" 이런 상황 자주 생기죠.그럴 때 꼭 써야 하는 속성이 바로 **justify-content**입니다.이 속성은 아이템을 주축(main axis) 방향으로 어떻게 정렬할지 결정하는 속성이에요.이번 포스팅에서는 justify-content의 다양한 값과 시각적인 차이를 비교하면서어떤 상황에서 어떤 정렬이 적합한지도 함께 정리해볼게요!✅ 기본 문법.container { display: flex; justify-content: center;} justify-content는 아이템들이 놓일 방향의 중심 정렬 방식을 설정합니다.주축이 가로(row)일 수도 있고, 세로(column)일 수도 있어요! 📦 사용 ..