CSS Grid 생성기
인터랙티브하게 CSS Grid 레이아웃 생성.
확장하려면 셀을 클릭하세요.
/* Contenedor */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
column-gap: 8px;
row-gap: 8px;
}CSS Grid 레이아웃 시각적 생성기
CSS Grid Layout은 CSS에서 사용할 수 있는 가장 강력한 2차원 레이아웃 시스템입니다. 한 축에서만 작동하는 Flexbox와 달리 Grid는 행과 열을 동시에 제어할 수 있어 대시보드, 이미지 갤러리, 잡지 레이아웃 같은 복잡한 레이아웃에 이상적입니다.
우리의 시각적 생성기를 사용하면 열과 행의 수를 정의하고, 크기 템플릿(grid-template-columns/rows)을 사용자 정의하며, 간격(gap)을 조정하고, 모든 정렬 속성(justify-items, align-items)을 실험할 수 있습니다.
미리보기가 실시간으로 업데이트되어 Grid가 어떻게 보일지 정확히 보여줍니다. 아무 셀이나 클릭하면 여러 열이나 행에 걸치게 확장할 수 있습니다.
자주 묻는 질문
"fr" 단위는 무엇을 의미하나요?
"fr"(fraction) 단위는 Grid 컨테이너에서 사용 가능한 공간의 비율을 나타냅니다. 예를 들어 "1fr 2fr"은 두 번째 열이 첫 번째의 두 배 너비인 두 개의 열을 만듭니다. flex-grow와 비슷하지만 비율을 정의하기에 더 직관적입니다.
CSS Grid가 Flexbox를 대체하나요?
아닙니다, 서로 보완합니다. Grid는 2차원 레이아웃(행과 열)에 적합하고, Flexbox는 1차원 레이아웃(단일 행 또는 열)에 탁월합니다. 대시보드에는 Grid를, 내비게이션 바에는 Flexbox를 사용하세요.
셀이 여러 열에 걸치게 하려면 어떻게 하나요?
우리 도구에서 셀을 클릭하고 "+" 버튼을 사용하여 확장하세요. CSS에서는 "grid-column: span 2" 또는 "grid-column: 1 / 3"으로 구현합니다. 행도 마찬가지로 grid-row를 사용합니다.
더 알고 싶으신가요? 전체 가이드 읽기 →