CSS Flexbox와 Grid 레이아웃 마스터하기

Flexbox란?

Flexbox는 1차원 레이아웃을 위한 CSS 모듈입니다. 주축(main axis)과 교차축(cross axis)을 사용하여 요소들을 배치합니다.

주요 Flexbox 속성

• display: flex: Flexbox 컨테이너 생성
• flex-direction: 주축 방향 설정 (row, column, row-reverse, column-reverse)
• justify-content: 주축 정렬 (flex-start, center, flex-end, space-between, space-around)
• align-items: 교차축 정렬 (flex-start, center, flex-end, stretch, baseline)
• flex-wrap: 줄바꿈 설정 (nowrap, wrap, wrap-reverse)

Flexbox 예제

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.item {
    flex: 1;
}

Grid란?

Grid는 2차원 레이아웃을 위한 CSS 모듈입니다. 행(row)과 열(column)을 모두 제어할 수 있어 복잡한 레이아웃을 만들 때 유용합니다.

주요 Grid 속성

• display: grid: Grid 컨테이너 생성
• grid-template-columns: 열 크기 정의
• grid-template-rows: 행 크기 정의
• grid-gap: 그리드 간격 설정
• grid-column / grid-row: 아이템 위치 지정

Grid 예제

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 20px;
}

.item {
    grid-column: span 2;
}

Flexbox vs Grid

특징	Flexbox	Grid
차원	1차원 (주축 중심)	2차원 (행과 열)
용도	컴포넌트 레이아웃	전체 페이지 레이아웃
복잡도	간단한 레이아웃	복잡한 레이아웃

실전 활용 팁

• Flexbox는 작은 컴포넌트나 1차원 레이아웃에 사용
• Grid는 전체 페이지 레이아웃이나 복잡한 2차원 레이아웃에 사용
• 두 기술을 함께 사용하여 더 유연한 레이아웃 구현 가능
• 반응형 디자인을 위해 미디어 쿼리와 함께 활용

마무리

Flexbox와 Grid는 현대적인 웹 레이아웃의 핵심 기술입니다. 두 기술을 모두 마스터하면 어떤 레이아웃도 구현할 수 있습니다.