Grid와 Flexbox는 CSS 레이아웃을 구성하는 두 가지 강력한 도구입니다. 이 둘은 각기 다른 목적과 특성을 지니고 있어, 상황에 따라 적절한 도구를 선택하여 사용하게 됩니다.
1. Flexbox (Flexible Box)
Flexbox는 주로 1차원 레이아웃을 다루기 위해 만들어진 레이아웃 모델입니다. Flexbox를 사용하면 요소를 한 줄(수평 또는 수직)에서 쉽게 배치하고, 요소 간의 공간을 자동으로 조정할 수 있습니다.
- 주 용도: 주로 단일 행 또는 열에 요소를 배치하고 정렬할 때 사용합니다.
- 기본 축: 주 축(main axis)과 교차 축(cross axis) 개념을 사용합니다. 기본적으로 flex 컨테이너의 방향이 주 축을 결정하며, 요소는 주 축을 기준으로 배치됩니다.
- 정렬과 공간 분배:
justify-content,align-items,align-self와 같은 속성을 통해 요소 간의 공간 분배와 정렬을 쉽게 할 수 있습니다.
- 반응형 디자인: 요소의 크기와 위치를 쉽게 조정할 수 있어 반응형 디자인에 적합합니다.
.container { display: flex; justify-content: center; /* 수평 정렬 */ align-items: center; /* 수직 정렬 */ }
2. Grid (CSS Grid Layout)
Grid는 2차원 레이아웃을 다루기 위해 만들어졌습니다. 이를 사용하면 행과 열을 동시에 관리할 수 있으며, 매우 복잡한 레이아웃도 효율적으로 구성할 수 있습니다.
- 주 용도: 행과 열을 모두 고려한 복잡한 레이아웃을 구성할 때 사용합니다.
- 행과 열: 그리드 컨테이너는 여러 행과 열로 이루어진 그리드를 정의합니다. 각 그리드 셀에 요소를 배치할 수 있으며,
grid-template-rows,grid-template-columns속성으로 그리드의 구조를 정의할 수 있습니다.
- 정렬과 배치:
grid-area,grid-row,grid-column등을 사용해 요소의 위치와 크기를 세밀하게 조정할 수 있습니다.
- 반응형 디자인: 미디어 쿼리와 결합하여 다양한 화면 크기에 맞는 레이아웃을 쉽게 만들 수 있습니다.
.container { display: grid; grid-template-columns: 1fr 2fr 1fr; /* 3개의 열을 정의, 가운데 열이 가장 큼 */ grid-template-rows: auto; /* 자동으로 행의 크기 설정 */ }
3. 주요 차이점 요약
- Flexbox는 1차원 레이아웃(행 또는 열)을 관리하는 데 주로 사용됩니다. 요소 간의 공간 조정 및 정렬이 필요할 때 유용합니다.
- Grid는 2차원 레이아웃(행과 열 모두)을 관리하는 데 적합하며, 복잡한 레이아웃을 쉽게 구성할 수 있습니다.
- 결론적으로, grid를 활용하는 것이 레이아웃을 정리하는데 더욱 용이하다.
4. 예시
.container {
width: 80%;
}
.card__img{
height: 70px;
object-fit: cover;
}
.card__box {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 5px;
}
.card {
display: flex;
border: 1px solid rgb(210,210,210);
border-radius: 6px;
box-shadow: 0 0 3px 0 rgb(170,170,170);
}
<section>
<div class="sec__title">에어비앤비 둘러보기</div>
<div class="card__box">
<div class="card">
<div><img class="card__img" src="/images/card1.jpg"></div>
<div class="sec__content">숙소 및 부티크 호텔</div>
</div>
<div class="card">
<div><img class="card__img" src="/images/card2.jpg"></div>
<div class="sec__content">트립</div>
</div>
<div class="card">
<div><img class="card__img" src="/images/card3.jpg"></div>
<div class="sec__content">어드벤처</div>
</div>
<div class="card">
<div><img class="card__img" src="/images/card4.jpg"></div>
<div class="sec__content">레스토랑</div>
</div>
</div>
</section>
Share article