CSS 그리드 레이아웃 코드를 생성하는 방법

CSS Grid 레이아웃 코드를 입력값으로 만들기

CSS Grid Generator는 열, 행, 간격 설정을 바탕으로 CSS Grid 레이아웃 코드를 생성하는 도구입니다. CSS의 격자 구조를 직접 조합하기 전에 열 트랙과 행 트랙을 어떤 형태로 출력할지 정리하고 싶을 때 유용합니다. 간단한 숫자 설정으로 반복 트랙을 만들거나, 200px 1fr처럼 작성한 트랙 문자열을 결과에서 확인하는 방식으로 사용할 수 있습니다.

이 도구는 열과 행을 분리해 다루므로 카드 목록, 콘텐츠 영역, 대시보드처럼 격자 구조가 필요한 상황에서 입력 구성을 비교하기 좋습니다. 결과에는 그리드 표시 선언과 열·행 템플릿 선언이 포함됩니다. 따라서 생성된 결과를 확인할 때는 입력값 자체보다 실제 CSS 선언이 어떤 형태로 나타났는지 살펴보는 편이 좋습니다.

입력을 간단히 시작하려면 열에 숫자를 넣고 행에는 auto를 사용할 수 있습니다. 반대로 트랙 크기를 직접 지정하려면 열에 사용자 지정 문자열을 넣어 결과에서 해당 문자열이 유지되는지 확인할 수 있습니다. 간격은 일반 간격과 열·행별 간격을 나누어 설정할 수 있으므로, 격자 전체의 간격과 방향별 간격을 구분해 살펴볼 수 있습니다.

입력하고 생성된 CSS 확인하기

1. 열, 행, 일반 간격, 열 간격, 행 간격에 해당하는 입력을 준비합니다. 입력을 생략하면 열은 3, 행은 auto, 일반 간격은 10, 열 간격과 행 간격은 각각 0으로 처리됩니다. 먼저 기본값으로 결과의 기본 구조를 확인한 다음 필요한 값만 바꾸면 입력 항목 사이의 영향을 구분하기 쉽습니다.

2. 열 값을 정합니다. 3처럼 숫자로만 된 값을 넣으면 숫자 자체가 텍스트로 해석된 뒤 열 선언에서 반복 표기로 바뀝니다. 이 경우 결과는 해당 숫자와 1fr을 사용하는 형태가 됩니다. 트랙을 직접 구성하려면 200px 1fr 또는 1fr 1fr 1fr처럼 사용자 지정 열 텍스트를 입력합니다. 이런 문자열은 숫자 하나만 입력한 경우와 다른 방식으로 결과에 남습니다.

3. 행 값을 정합니다. 2처럼 숫자로만 된 값은 auto 트랙을 해당 개수만큼 반복하는 표기로 바뀝니다. 행에 auto를 입력하면 숫자 행 변환의 대상이 아니므로 auto가 유지됩니다. 숫자 형태와 사용자 지정 텍스트의 차이를 비교하려면 행 값만 바꾸고 나머지 입력은 그대로 두는 방법이 적절합니다.

4. 간격 값을 숫자로 입력합니다. 일반 간격에 값이 있으면 결과의 일반 간격 선언에 px 단위가 붙습니다. 열 간격과 행 간격도 값이 있으면 각각 별도의 선언으로 출력됩니다. 0처럼 거짓으로 처리되는 값은 해당 선언이 생성되지 않으므로, 간격을 사용하지 않을 방향에는 0을 둘 수 있습니다. 입력에 px나 rem을 덧붙이기보다 수치만 입력해 결과 단위를 확인합니다.

5. 생성을 실행하고 결과 CSS를 읽습니다. 먼저 display: grid가 있는지 확인한 뒤 열 템플릿과 행 템플릿 선언을 차례로 봅니다. 숫자 열이 repeat와 1fr을 사용하는지, 숫자 행이 repeat와 auto를 사용하는지 확인합니다. 마지막으로 일반 간격, 열 간격, 행 간격이 입력 조건에 맞게 각각 출력되었는지 비교합니다.

6. 한 번에 여러 조건을 바꾸기보다 열 또는 행 하나와 간격 하나씩 변경해 결과를 비교합니다. 예를 들어 열만 3에서 200px 1fr로 바꾸면 반복 표기와 사용자 지정 문자열의 차이를 확인할 수 있습니다. 행만 auto에서 2로 바꾸면 행 반복 표기의 적용 여부를 살펴볼 수 있습니다. 결과를 사용할 때는 생성된 선언의 형태를 확인한 뒤 자신의 CSS 구성에 맞는지 검토합니다.

결과 CSS의 표기와 적용 범위 이해하기

결과를 읽을 때는 입력 유형에 따른 표기 규칙을 먼저 구분해야 합니다. 열 값이 숫자로만 되어 있으면 열 템플릿은 해당 숫자와 1fr을 사용하는 repeat 형태로 나타납니다. 예를 들어 열에 3을 입력하면 동일한 유연 트랙 세 개를 표현하는 구조를 확인할 수 있습니다. 이는 숫자 입력에 적용되는 변환이며, 입력한 숫자가 임의의 트랙 문자열로 확장되는 방식은 아닙니다.

행 값이 숫자로만 되어 있고 auto가 아니면 행 템플릿은 해당 숫자와 auto를 사용하는 repeat 형태가 됩니다. 반면 auto 또는 다른 행 텍스트는 숫자 행 반복 규칙 대신 입력한 텍스트가 유지됩니다. 열에서도 200px 1fr이나 1fr 1fr 1fr처럼 숫자 하나로만 이루어지지 않은 텍스트는 숫자 열 반복 규칙의 대상이 되지 않고 입력 문자열이 유지됩니다. 따라서 결과에서 repeat가 보이지 않는다고 해서 입력이 숫자로 잘못 인식되었다고 판단하기보다, 입력이 숫자만으로 구성되었는지 먼저 확인해야 합니다.

간격은 입력한 단위를 그대로 보존하는 방식이 아닙니다. 참으로 처리되는 일반 간격은 px 단위의 일반 간격 선언으로 출력되고, 참으로 처리되는 열 간격과 행 간격은 방향별 px 선언으로 출력됩니다. 0처럼 거짓으로 처리되는 값은 그에 대응하는 선언을 만들지 않습니다. 일반 간격을 0으로 두고 열 간격만 설정하면 일반 간격 선언 없이 열 간격 선언만 나타날 수 있습니다.

생성 결과에는 display: grid와 열·행 템플릿 선언이 포함됩니다. 이 구조는 도구가 CSS Grid 레이아웃 코드를 만들었다는 결과 형태를 보여 주지만, 입력한 사용자 지정 텍스트가 원하는 트랙 구성인지까지 판단해 주는 의미는 아닙니다. 숫자만 입력했을 때의 반복 변환과 텍스트 입력이 유지되는 범위를 구분해 결과를 검토해야 합니다. 특히 간격을 다른 CSS 단위로 표시하려는 경우에는 이 도구의 출력 단위가 px라는 점을 고려해야 합니다.

간단한 결과 점검 순서는 다음과 같습니다. 먼저 그리드 표시 선언을 찾고, 다음으로 열 템플릿과 행 템플릿을 확인합니다. 그 뒤 repeat 적용 여부를 입력과 대조하고, 마지막에 간격 선언의 존재 여부와 px 단위를 확인합니다. 이 순서는 입력값, 트랙 표기, 간격 출력을 나누어 살피게 해 주므로 한 부분의 결과를 다른 부분과 혼동하는 일을 줄일 수 있습니다.

사용 예시

카드 세 개를 한 줄의 유연한 열로 배치하고 콘텐츠 높이에 맞춰 행을 자동 조정하려는 상황입니다.

열에 3, 행에 auto, 일반 간격에 12를 입력하고 생성을 실행합니다.

생성 결과에는 display: grid, 열 템플릿 선언, 행 템플릿 선언이 포함됩니다. 열 3은 repeat와 1fr을 사용하는 형태로 나타나고, 행 auto는 auto로 유지됩니다. 일반 간격 12는 12px을 사용하는 선언 형태로 나타납니다.

제한 사항

• 문서화된 반복 변환은 숫자로만 된 열·행 값에 조건부로 적용되고, 다른 텍스트는 입력 문자열로 유지됩니다. 간격 선언은 px 단위를 사용하며, 0처럼 거짓으로 처리되는 값은 해당 선언에서 빠질 수 있습니다.

자주 발생하는 오류

• 간격 입력에 1rem이나 10px처럼 단위를 함께 넣으면 원하는 결과와 다르게 해석할 수 있습니다. 간격에는 수치만 입력하고 생성된 선언에서 px 단위가 붙었는지 확인하세요.

자주 묻는 질문

열에 숫자 대신 200px 1fr을 입력할 수 있나요?

입력할 수 있습니다. 열 값이 숫자로만 되어 있지 않으면 200px 1fr 같은 사용자 지정 텍스트는 숫자 열 반복 규칙의 대상이 되지 않고 입력한 문자열이 유지됩니다.

행에 auto를 입력하면 반복 표기로 바뀌나요?

auto에는 숫자 행 반복 변환이 적용되지 않으므로 auto가 유지됩니다. 행 값이 숫자로만 되어 있고 auto가 아닌 경우에만 숫자와 auto를 사용하는 반복 표기가 적용됩니다.

열 간격과 행 간격을 따로 설정할 수 있나요?

각 입력에 값이 있으면 일반 간격, 열 간격, 행 간격이 조건에 따라 별도 선언으로 출력됩니다. 0처럼 거짓으로 처리되는 값은 대응하는 선언에서 빠질 수 있습니다.