CSS Grid 생성기

생성되는 CSS

생성기는 .container 규칙 하나만 출력하며, 선언은 display: grid, grid-template-columns, grid-template-rows, column-gap, row-gap 다섯 개로 고정되어 있습니다. 스타일시트에 붙여넣고 .container를 자신의 클래스명으로 바꾸면 됩니다.

이 규칙은 컨테이너만 정합니다. 자식 요소에는 아무것도 쓰지 않아도 HTML에 적힌 순서대로 셀에 하나씩 들어가고, 한 행이 차면 다음 행으로 넘어갑니다. 미리보기도 같은 방식으로 항상 “열 수 × 행 수”만큼 색 상자를 그립니다. 템플릿에 쓴 열 개수가 “열 수”와 다르면 남는 상자는 암시적 행으로 넘어가는데, 실제 페이지의 자식 요소도 똑같이 움직입니다.

예시: 쇼핑몰 상품 목록 4열

쇼핑몰 상품 목록처럼 같은 크기의 카드를 네 개씩 나란히 놓는 경우입니다. 열 수 4, 행 수 2, 열 간격 16px, 행 간격 24px로 맞추면 다음 CSS가 나옵니다.

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  column-gap: 16px;
  row-gap: 24px;
}

fr 몫은 간격을 먼저 빼고 나눕니다. 컨테이너 너비가 1080px이면 열 간격 세 개(48px)를 뺀 1032px을 넷으로 나눠 한 열이 258px이 됩니다. 상품이 8개를 넘으면 9번째부터는 암시적 행에 들어가고, 암시적 행의 높이는 기본값 auto입니다. 카드 높이를 내용에 맞추고 싶다면 복사한 뒤 grid-template-rows 줄을 지우면 됩니다(도구에서 행 템플릿을 비워도 출력은 repeat(N, 1fr)입니다).

예시: 오른쪽 패널이 있는 관리자 화면

본문 영역 오른쪽에 설정 패널을 고정 너비로 두는 관리자 화면입니다. 열 수 2, 행 수 2로 맞춘 뒤 사용자 지정 템플릿을 열어 열 템플릿에 minmax(0, 1fr) 320px, 행 템플릿에 auto 1fr을 넣고, 열 간격은 1.5rem, 행 간격은 1rem으로 둡니다.

.container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-rows: auto 1fr;
  column-gap: 1.5rem;
  row-gap: 1rem;
}

루트 글자 크기가 16px이면 1.5rem은 24px이므로, 너비 1280px에서 본문 열은 1280 − 320 − 24 = 936px입니다. 입력 순서가 중요합니다. 열 수를 바꾸면 열 템플릿이 repeat(N, 1fr)로, 행 수를 바꾸면 행 템플릿이 다시 덮어써집니다. 간격만 바꿀 때는 템플릿이 그대로 남습니다.

한국어 문장과 word-break: keep-all

한국어 문장에는 word-break: keep-all을 지정하기도 합니다. CSS Text Level 3 명세는 Korean has two styles of line-breaking: between any two Korean syllables (word-break: normal) or, like English, mainly at spaces (word-break: keep-all).라고 설명합니다. 기본값 normal에서는 음절 사이 어디서나 줄을 바꿀 수 있지만, keep-all에서는 띄어쓰기 단위인 어절 안에서 줄을 바꾸지 않습니다.

그리드에서는 이 차이가 열 너비에 영향을 줍니다. minmax() 밖에 쓴 fr에 대해 CSS Grid Level 2 명세(7.2.1절)는 implies an automatic minimum (i.e. minmax(auto, <flex>))라고 정합니다. 즉 1fr 열은 내용의 최소 너비(min-content)보다 좁아지지 않습니다. keep-all이면 가장 긴 어절이 최소 너비가 되므로, 좁은 3열 카드에 “통합회원가입안내”처럼 띄어쓰기 없는 긴 제목이 들어가면 그 열만 넓어질 수 있습니다. 세 열을 항상 같은 너비로 두려면 템플릿을 repeat(3, minmax(0, 1fr))로 바꿉니다.

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
  column-gap: 1rem;
  row-gap: 1rem;
}

이렇게 하면 열 너비는 같아지지만, 줄을 바꿀 수 없는 긴 어절은 셀 밖으로 넘칠 수 있습니다. 그런 셀에는 overflow-wrap: anywhere를 함께 지정해 어절 안에서도 줄을 바꿀 수 있게 합니다.

제한 사항

• 컨테이너 규칙만 만듭니다. grid-column, grid-row, grid-template-areas, 이름 있는 그리드 라인, 정렬 속성은 입력란이 없으니 복사한 뒤 직접 추가합니다.
• 열 수는 112, 행 수는 18입니다. 더 큰 수를 넣으면 12열, 8행으로 처리합니다.
• 템플릿과 간격 입력란은 값을 검증하지 않습니다. repeat(3 1fr) 같은 잘못된 값도 그대로 복사되며, 미리보기는 브라우저가 잘못된 값을 무시하기 때문에 마지막으로 유효했던 템플릿을 계속 보여 줍니다.
• 미리보기 상자 수는 항상 “열 수 × 행 수”이며 템플릿의 열 개수와 맞추지 않습니다.

트랙 크기 규칙은 CSS Grid Layout Module Level 2에 있습니다. 한 방향으로만 늘어놓는다면 CSS Flexbox 생성기가 더 간단합니다.