CSS Grid 생성기

Grid와 Flexbox는 언제 골라 쓰나요?

Grid는 열과 행을 함께 정하는 2차원 배치 방식입니다. 여러 줄에 걸친 카드의 열 위치를 맞추거나 큰 카드와 작은 카드를 한 화면에 배치할 때 적합합니다. Flexbox는 한 줄 또는 한 열을 따라 항목을 정렬하고 남는 공간을 나누는 작업에 편리합니다. Grid로 페이지를 나누고 각 카드 안의 버튼 줄에는 Flexbox를 사용하는 식으로 함께 쓸 수 있습니다.

• 카드 목록·사진 목록: 여러 행에서 같은 열 경계를 유지합니다.
• 대시보드: 일부 항목이 여러 열이나 행을 차지하도록 구성합니다.
• 메뉴·버튼 줄: 항목의 내용과 길이에 맞춘 한 방향 정렬부터 검토합니다.

설정부터 코드 복사까지

설정에서 배치 모드와 열·행을 정한 뒤 미리보기로 크기를 확인하세요. 항목 수와 칸 수는 서로 다릅니다. 항목 하나가 여러 칸을 차지하면 뒤 항목이 다음 행으로 내려갈 수 있습니다. 처음부터 모든 값을 바꾸기보다 프리셋을 고르고 간격, 안쪽 여백, 항목 영역 순서로 조절하면 변화가 보입니다.

• 배치 모드와 열·행 또는 자동 줄바꿈의 최소 너비를 정합니다.
• 가로·세로 간격과 안쪽 여백을 조절합니다.
• 고정 열 모드에서는 미리보기의 항목을 선택해 차지할 열·행 수를 바꿉니다.
• 미리보기 폭을 바꿔 확인하고 CSS·HTML을 각각 복사합니다.

같은 너비의 3열은 어떻게 계산하나요?

grid-template-columns: repeat(3, minmax(0, 1fr));는 같은 비율로 공간을 나누는 열 3개를 만듭니다. fr은 고정 크기와 간격을 처리한 뒤 남는 공간을 나누는 비율 단위입니다. 테두리가 없고 안쪽 여백을 포함한 전체 너비가 680px, 좌우 여백이 각각 24px, 열 간격이 16px이면 각 열 너비는 200px입니다. 세 열에는 열 사이 간격이 두 번 들어갑니다.

• 열에 사용할 너비: 680 − 24 × 2 − 16 × 2 = 600px
• 각 열 너비: 600 ÷ 3 = 200px
• 이 조건에서 두 열을 차지하는 항목의 너비: 200 × 2 + 16 = 416px

행 수와 항목 수는 왜 다른가요?

grid-template-rows는 미리 선언할 행을 정합니다. 3열·2행에 항목 6개를 하나씩 넣으면 두 행에 들어가지만 항목을 추가하거나 일부 항목을 크게 만들면 공간이 더 필요합니다. 브라우저는 이때 추가 행을 자동으로 만들 수 있습니다. 이렇게 생긴 행의 크기는 grid-auto-rows가 정합니다. 이 도구는 선언한 행과 추가 행 모두 최소 84px에서 콘텐츠에 따라 늘어나도록 코드를 만듭니다.

• 열·행은 배치할 공간의 구조입니다.
• 항목 수는 실제로 넣을 요소의 개수입니다.
• 행 높이를 고정한 페이지에서는 긴 문장과 이미지가 넘치지 않는지 따로 확인합니다.

gap과 padding을 따로 조절하는 이유

gap은 열과 행 사이의 간격이고 padding은 컨테이너 경계와 내용 사이의 안쪽 여백입니다. gap만 늘려도 바깥 테두리와 첫 항목 사이에는 여백이 생기지 않습니다. 이 도구의 안쪽 여백은 전체 Grid 컨테이너에 적용합니다. 카드 안의 글자와 카드 테두리 사이 여백은 카드 자체의 padding으로 별도 조절하세요.

• gap: 16px;는 행과 열 간격을 모두 16px로 만듭니다.
• gap: 16px 24px;는 행 간격 16px, 열 간격 24px 순서입니다.
• padding: 24px;는 컨테이너 안쪽 네 방향에 24px 여백을 둡니다.
• 전체 너비에 padding을 포함하려면 box-sizing: border-box;를 확인합니다.

minmax(0, 1fr)은 무엇이 다른가요?

minmax()는 한 열이나 행의 최소 크기와 최대 크기를 정합니다. 1fr만 쓰면 최소 크기가 auto로 취급되어 긴 단어나 큰 이미지의 최소 크기가 열 너비에 영향을 줄 수 있습니다. minmax(0, 1fr)은 열의 최소값을 0으로 두어 공간에 맞게 줄어들도록 합니다. 다만 글자나 이미지 자체의 넘침까지 없애지는 않습니다. 긴 주소에는 줄바꿈을, 이미지에는 부모보다 커지지 않는 너비 제한을 함께 적용하세요.

반응형 auto-fit은 열 수를 어떻게 정하나요?

자동 줄바꿈 모드는 컨테이너 너비와 항목의 최소 너비를 보고 들어갈 열 수를 정합니다. 예를 들어 최소 너비 200px, 열 간격 20px이고 항목이 충분하다면 내용 영역 640px에 3열, 420px에 2열이 들어갑니다. 계산은 최소 너비 × 열 수 + 간격 × (열 수 − 1)입니다. 여기서 내용 영역은 컨테이너의 테두리와 좌우 padding을 제외한 너비입니다.

• 3열에 필요한 너비: 200 × 3 + 20 × 2 = 640px
• 2열에 필요한 너비: 200 × 2 + 20 = 420px
• auto-fit은 비어 있는 열을 접으므로 항목이 적으면 남은 항목이 더 넓어질 수 있습니다.
• 브라우저가 같아도 사이드바 안처럼 부모가 좁으면 열 수가 달라집니다.

항목 하나가 여러 칸을 차지하게 만들기

span은 항목이 차지할 열이나 행의 개수입니다. grid-column: span 2;는 두 열에 걸친 너비를, grid-row: span 2;는 두 행에 걸친 높이를 요청합니다. 합쳐진 영역에는 중간 간격도 포함됩니다. span만으로 시작 위치를 고정하는 것은 아니며 브라우저의 자동 배치 순서와 남은 공간에 따라 위치가 정해집니다. 고정 열 모드에서 미리보기 항목을 선택해 조절하세요. 자동 줄바꿈으로 바꾸면 모든 항목의 열·행 span이 1로 초기화됩니다.

모바일에서는 열 수와 넓은 항목을 함께 확인하세요

고정 3열은 화면이 좁아져도 열 수를 유지합니다. 카드가 너무 좁아지면 자동 줄바꿈으로 바꾸거나 실제 CSS에 미디어 쿼리를 추가해 열 수를 줄이세요. 복사한 CSS에서 열 수만 줄이고 항목의 span을 그대로 두면 의도하지 않은 열이 생길 수 있습니다. 도구에서 고정 열 수를 줄일 때는 가로 span도 그 열 수 이하로 맞춥니다.

• 자동 줄바꿈 코드는 min(100%, 최소 너비)를 사용해 좁은 부모 안에서도 한 열이 들어가도록 합니다.
• padding과 긴 내용까지 들어갈 공간이 있는지 함께 확인합니다.
• 360px·480px 미리보기는 현재 화면의 가용 폭을 넘지 않습니다. 실제 표시된 폭도 확인하세요.
• 미리보기 폭 전환은 실제 페이지의 미디어 쿼리와 모든 주변 CSS를 대신하지 않습니다.

프리셋은 어떤 콘텐츠에 맞나요?

프리셋은 배치를 시작할 때 쓸 예시입니다. 기본 카드 배치는 비슷한 분량의 항목을 나란히 비교할 때 사용합니다. 강조 배치는 첫 항목을 2열·2행 크기로 두어 대표 콘텐츠가 있는 화면을 만드는 출발점이 됩니다. 자동 줄바꿈 예시는 부모 너비에 맞춰 열 개수가 바뀌는 목록에 사용할 수 있습니다. 예시를 고른 뒤 실제 콘텐츠 길이에 맞춰 항목 수와 영역을 조절하세요.

CSS와 HTML을 붙일 때 확인할 것

HTML은 컨테이너와 항목의 구조를 만들고 CSS는 그 요소의 배치를 정합니다. CSS만 붙여 넣었다면 기존 HTML의 클래스와 생성한 코드의 클래스가 맞는지 확인하세요. Grid의 직접 자식 요소가 배치 대상이므로 중간에 다른 요소로 감싸면 결과가 달라집니다. 번호가 붙은 예시 항목은 실제 콘텐츠로 교체하고 기존 CSS가 같은 속성을 덮어쓰는지도 살펴보세요.

• CSS와 HTML의 클래스 이름을 서로 맞춥니다.
• 항목별 span 규칙도 컨테이너 규칙과 함께 복사합니다.
• 제목·이미지·링크를 넣은 후 줄바꿈과 키보드 이동 순서를 확인합니다.
• 최종 페이지에서 좁은 화면과 넓은 화면을 각각 확인합니다.

이 생성기로 확인할 수 있는 범위

이 도구는 열·행, 간격, 안쪽 여백과 항목별 span으로 Grid 배치를 만드는 데 초점을 맞춥니다. 기존 사이트 CSS를 불러와 충돌을 분석하거나 모든 Grid 속성을 편집하지는 않습니다. 이름으로 영역을 지정하는 grid-template-areas, 부모의 격자를 이어받는 subgrid 같은 구성은 복사한 코드를 별도로 확장해야 합니다. 미리보기와 실제 페이지는 글꼴·콘텐츠·부모 너비가 다를 수 있으므로 최종 확인은 적용할 페이지에서 진행하세요.

• 고정 열 1~12개, 선언할 행 1~8개, 항목 1~24개를 설정합니다.
• 간격은 0~80px, 안쪽 여백은 0~64px, 자동 줄바꿈의 최소 너비는 80~600px입니다.
• 항목의 가로 span은 고정 열 수까지, 세로 span은 1~4로 설정합니다.
• 입력은 범위 안의 정수를 사용합니다. 빈칸이나 범위를 벗어난 값은 고친 뒤 코드를 복사할 수 있습니다.