CSS Grid 생성기 - 시각적 그리드 레이아웃 빌더 온라인
실시간 미리보기로 CSS Grid 레이아웃을 시각적으로 생성하세요. 열, 행, 간격, 정렬, 그리드 영역, 아이템 배치를 정의합니다 — 100% 클라이언트 사이드, 서버로 데이터 전송 없음.
자주 묻는 질문
CSS Grid란 무엇인가요?
CSS Grid Layout은 행과 열을 동시에 정의하여 복잡한 페이지 레이아웃을 만들 수 있는 2차원 CSS 레이아웃 시스템입니다. 1차원인 Flexbox와 달리, CSS Grid는 수평과 수직 레이아웃을 동시에 처리하므로 전체 페이지 레이아웃, 대시보드, 갤러리 등에 적합합니다.
이 CSS Grid 생성기는 어떻게 사용하나요?
1. 열과 행의 트랙 크기를 설정하여 그리드 구조를 정의합니다. 2. row-gap과 column-gap 슬라이더로 셀 간격을 설정합니다. 3. 정렬 속성을 구성합니다. 4. 그리드 아이템을 추가하고 grid-column/grid-row 값으로 배치하거나, 영역 페인터로 이름 영역을 사용합니다. 5. 프리셋 레이아웃을 시작점으로 사용해보세요. 6. 생성된 CSS와 HTML 코드를 프로젝트에 복사합니다.
데이터는 안전한가요?
네, 완전히 안전합니다. 이 도구는 클라이언트 사이드 JavaScript로 전적으로 브라우저에서 실행됩니다. 레이아웃 구성, CSS 코드 등 어떤 데이터도 서버로 전송되지 않습니다.
CSS Grid와 CSS Flexbox의 차이점은 무엇인가요?
CSS Grid는 2차원(행과 열 동시), Flexbox는 1차원(행 또는 열)입니다. 페이지 레벨 레이아웃에는 Grid를, 네비게이션 바나 카드 행 같은 단순 선형 레이아웃에는 Flexbox를 사용합니다. 둘은 상호 보완적입니다.
grid-template-areas란 무엇인가요?
grid-template-areas는 숫자 라인 번호 대신 이름이 있는 영역으로 레이아웃을 정의합니다. 'header', 'sidebar', 'main' 같은 이름을 영역에 할당하고 grid-area로 아이템을 배치합니다. 의미 있는 영역이 있는 복잡한 레이아웃에서 CSS를 더 읽기 쉽고 유지보수하기 쉽게 만듭니다.
CSS Grid에서 fr 단위는 무엇인가요?
fr(fractional) 단위는 그리드 컨테이너의 사용 가능한 여유 공간의 비율을 나타냅니다. 예를 들어, grid-template-columns: 1fr 2fr 1fr은 가운데 열이 양쪽보다 두 배 넓은 세 개의 열을 만듭니다.
grid-auto-flow는 어떻게 작동하나요?
grid-auto-flow는 자동 배치 아이템이 그리드를 채우는 방식을 제어합니다. 'row'(기본값)은 왼쪽에서 오른쪽, 위에서 아래로 배치합니다. 'column'은 위에서 아래, 왼쪽에서 오른쪽으로 배치합니다. 'dense'를 추가하면 빈 공간을 채워 더 컴팩트한 레이아웃을 만듭니다.
코드 예제
// CSS Grid Generator - JavaScript Implementation
function formatTrackSize(value, unit) {
if (unit === 'auto') return 'auto';
return `${value}${unit}`;
}
function generateGridCSS(options = {}) {
const {
display = 'grid',
columns = [{ value: 1, unit: 'fr' }, { value: 1, unit: 'fr' }, { value: 1, unit: 'fr' }],
rows = [{ value: 1, unit: 'fr' }, { value: 1, unit: 'fr' }, { value: 1, unit: 'fr' }],
rowGap = 0,
columnGap = 0,
justifyItems = 'stretch',
alignItems = 'stretch',
justifyContent = 'start',
alignContent = 'start',
gridAutoFlow = 'row',
areas = null,
} = options;
const rules = [`display: ${display}`];
rules.push(`grid-template-columns: ${columns.map(t => formatTrackSize(t.value, t.unit)).join(' ')}`);
rules.push(`grid-template-rows: ${rows.map(t => formatTrackSize(t.value, t.unit)).join(' ')}`);
if (areas && areas.length > 0) {
const areasStr = areas.map(row => `"${row.join(' ')}"`).join('\n ');
rules.push(`grid-template-areas:\n ${areasStr}`);
}
if (rowGap > 0 || columnGap > 0) {
if (rowGap === columnGap) {
rules.push(`gap: ${rowGap}px`);
} else {
rules.push(`gap: ${rowGap}px ${columnGap}px`);
}
}
if (justifyItems !== 'stretch') rules.push(`justify-items: ${justifyItems}`);
if (alignItems !== 'stretch') rules.push(`align-items: ${alignItems}`);
if (justifyContent !== 'start') rules.push(`justify-content: ${justifyContent}`);
if (alignContent !== 'start') rules.push(`align-content: ${alignContent}`);
if (gridAutoFlow !== 'row') rules.push(`grid-auto-flow: ${gridAutoFlow}`);
return rules.map(r => `${r};`).join('\n');
}
// Usage
console.log(generateGridCSS({
columns: [{ value: 1, unit: 'fr' }, { value: 2, unit: 'fr' }, { value: 1, unit: 'fr' }],
rows: [{ value: 100, unit: 'px' }, { value: 1, unit: 'fr' }],
rowGap: 16,
columnGap: 16,
}));
// display: grid;
// grid-template-columns: 1fr 2fr 1fr;
// grid-template-rows: 100px 1fr;
// gap: 16px;