Grid & Flexbox 레이아웃 빌더

단순한 클릭과 드래그로 복잡한 CSS Grid 및 Flexbox 레이아웃을 디자인하세요.

4
Resize the container box handle below (bottom-right) to test responsiveness
1
2
3
4
.container {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
16px

Grid & Flexbox 레이아웃 가이드

최신 웹 디자인의 필수 요소인 CSS Grid와 Flexbox의 차이점과 올바른 사용법을 안내합니다.

Grid와 Flexbox, 언제 써야 할까요?

**Flexbox(1차원)**: 주로 요소를 가로(Row) 직렬 형태 또는 세로(Column) 정렬해야 할 때 유용합니다. 네비게이션 메뉴 바, 아이콘 옆의 텍스트 배치, 등 가변적인 요소를 한 방향으로 나열할 때 가장 적합합니다. **Grid(2차원)**: 바둑판처럼 행(Rows)과 열(Columns)이 동시에 교차하는 전체 페이지 구조나 사진 갤러리 디자인에 특화되어 있습니다. 화면을 칸으로 나누고 특정 구역(Area)에 요소를 배치할 때 가장 강력합니다.

Gap (간격) 다루기

과거에는 아이템 사이의 공백을 주기 위해 복잡한 `margin`을 계산하고 `last-child` 속성으로 여백을 제거하는 잔기술이 필요했습니다. 하지만 최신 레이아웃 속성인 `gap` 만 부여하면 아이템과 아이템 사이(사이즈)에만 정확히 여백이 들어갑니다. (IE를 제외한 모든 모던 브라우저 지원)

반응형 디자인 적용 팁

그리드의 `repeat(auto-fit, minmax(200px, 1fr))` 패턴을 활용하면, 창크기가 작아질 때 미디어 쿼리(`@media`) 한 줄 없이도 3단 배열이 2단, 1단으로 자연스럽게 축소되는 Magic Layout을 완성할 수 있습니다.