Grid와 Flexbox의 차이는?

Grid는 2차원(행과 열 동시 필요). Flexbox는 1차원(행 또는 열). Grid는 페이지 레이아웃, Flexbox는 컴포넌트 레이아웃에 적합합니다.

CSS Grid 생성기

무료 온라인 CSS Grid 레이아웃 생성 도구, 시각적 편집

설정

열3

행3

Gap8px

CSS

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 8px;