CSS Grid 생성기

기능

행/열 설정

끌어서 크기 조절

셀 병합

간격 조절

CSS와 HTML 동시 생성

사용 방법

1. 행과 열의 수를 설정하세요.

2. 행 높이와 열 너비를 조정하세요.

3. 그리드 간격을 설정하세요.

4. 생성된 CSS와 HTML을 복사하세요.

이 도구에 대하여

CSS Grid는 행과 열을 동시에 배치하므로 갤러리, 대시보드, 페이지 구조에 자연스럽게 어울립니다. 이 생성기는 그리드 컨테이너를 시각적으로 설정합니다. 필요한 열과 행의 개수, 그 사이의 간격, 열이 공간을 나누는 방식을 고르세요. 1fr로 균등하게, 자동 크기, 긴 내용 때문에 열이 넓어지지 않게 하는 minmax(0, 1fr), 고정 100px 트랙 중에서 선택할 수 있습니다. 미리보기는 항목이 트랙에 어떻게 채워지는지 보여 주고, CSS는 repeat()를 사용해 간결하고 읽기 쉽게 작성됩니다. 이를 출발점으로 복사한 뒤 개별 항목은 자신의 스타일시트에서 grid-column과 grid-row로 배치하세요.

자주 묻는 질문

fr 단위는 무엇인가요?

fr은 그리드 컨테이너의 남는 공간 중 한 몫을 뜻합니다. 세 열이 모두 1fr이면 공간을 똑같이 나누고, 2fr 1fr이면 첫 열이 두 번째 열의 두 배 너비가 됩니다.

1fr 대신 minmax(0, 1fr)를 쓰는 이유는 무엇인가요?

1fr 트랙은 내용의 최소 크기보다 작아질 수 없어서 긴 단어나 넓은 표가 열을 넓힐 수 있습니다. minmax(0, 1fr)는 열이 줄어들 수 있게 해 균등한 열을 정말 균등하게 유지합니다.

그리드를 반응형으로 만들려면 어떻게 하나요?

흔히 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))를 씁니다. 너비가 허락하는 만큼 최소 240px 열을 최대한 넣고, 나머지는 미디어 쿼리 없이 새 행으로 넘깁니다.

항목이 여러 열에 걸치게 하려면 어떻게 하나요?

항목에 grid-column: span 2를 주면 두 열을 차지하고, grid-column: 1 / -1이면 전체 너비에 걸칩니다. 행은 grid-row로 같은 방식으로 지정합니다.

gap, column-gap, row-gap은 어떻게 다른가요?

column-gap은 열 사이, row-gap은 행 사이의 간격이며, gap은 둘을 함께 쓰는 약식입니다. 간격은 트랙 사이에만 들어가고 그리드 바깥에는 들어가지 않습니다.

기능

사용 방법

이 도구에 대하여

자주 묻는 질문

관련 도구