css display flex grid 어떨때 사용할까?

CSS에서 Flexbox와 Grid 레이아웃 시스템은 각각 다른 상황에 적합하며, 다음과 같은 기준을 통해 어떤 시스템을 사용할지 결정할 수 있습니다:

Flexbox

Flexbox는 일차원 레이아웃 시스템으로, 주로 한 방향(행 또는 열)으로 아이템을 배치하는 데 유리합니다. 다음과 같은 상황에서 Flexbox를 사용합니다:

1. 단일 행 또는 단일 열 레이아웃: Flexbox는 단일 행이나 단일 열로 구성된 간단한 레이아웃에 적합합니다. 예를 들어, 네비게이션 바, 버튼 그룹, 카드 목록 등.
2. 정렬과 간격 조정: Flexbox는 아이템을 중앙 정렬하거나, 끝에 정렬하거나, 고르게 간격을 조정하는 작업을 쉽게 할 수 있습니다. justify-content와 align-items 속성을 활용해 간단하게 배치할 수 있습니다.
3. 아이템의 동적 크기 조절: Flexbox는 아이템의 크기를 유동적으로 조절하기 쉽습니다. flex-grow, flex-shrink, flex-basis 속성을 이용해 아이템의 크기를 제어할 수 있습니다.

Grid

Grid는 이차원 레이아웃 시스템으로, 행과 열을 모두 사용하는 복잡한 레이아웃에 적합합니다. 다음과 같은 상황에서 Grid를 사용합니다:

1. 복잡한 이차원 레이아웃: Grid는 행과 열을 동시에 사용하여 복잡한 레이아웃을 만들 때 유리합니다. 예를 들어, 대시보드, 포토 갤러리, 전체 페이지 레이아웃 등.
2. 정확한 위치 지정: Grid는 아이템을 정확한 위치에 배치하는 데 유리합니다. grid-template-rows, grid-template-columns, grid-area 등을 이용해 레이아웃을 세밀하게 조정할 수 있습니다.
3. 고정 크기와 비율: Grid는 특정 크기와 비율로 아이템을 배치하는 데 유용합니다. fr 단위를 사용하여 비율에 따라 크기를 조정하거나, minmax() 함수로 최소 및 최대 크기를 설정할 수 있습니다.

결합 사용

Flexbox와 Grid를 함께 사용하는 것도 일반적입니다. 페이지의 전체 레이아웃을 Grid로 설정하고, Grid 아이템 내부를 Flexbox로 배치하는 방식이 흔히 사용됩니다. 예를 들어, 페이지의 전체 구조는 Grid를 이용해 설정하고, 각 섹션 내부의 내용은 Flexbox를 이용해 정렬할 수 있습니다.

예시

• Flexbox 예시:

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

 

• Grid 예시:

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

요약

• Flexbox는 단일 방향(행 또는 열) 레이아웃에 적합하며, 간단한 정렬 및 배치 작업에 유리합니다.
• Grid는 이차원 레이아웃에 적합하며, 복잡한 레이아웃과 정확한 위치 지정이 필요한 경우 유리합니다.
• 필요에 따라 Flexbox와 Grid를 함께 사용하는 것도 좋은 방법입니다.