이 페이지는 Cloud Translation API를 통해 번역되었습니다.

CSS 그리드 레이아웃 검사

Jecelyn Yeen

Sofia Emelianova

이 가이드에서는 페이지에서 CSS 그리드를 찾고, 이를 검사하고, Chrome DevTools의 요소 패널에서 레이아웃 문제를 디버그하는 방법을 보여줍니다.

이 도움말에 표시된 스크린샷의 예는 과일 상자 및 과자 상자라는 두 웹페이지에서 가져온 것입니다.

CSS 그리드 살펴보기

페이지의 HTML 요소에 display: grid 또는 display: inline-grid가 적용된 경우 요소 패널에서 요소 옆에 grid 배지가 표시됩니다.

디스커버 그리드

배지를 클릭하여 페이지에서 그리드 오버레이 표시를 전환합니다. 오버레이는 그리드 선과 트랙의 위치를 보여주기 위해 그리드처럼 배치된 요소 위에 표시됩니다.

레이아웃 창을 엽니다. 페이지에 그리드가 포함된 경우 레이아웃 창에 그리드를 볼 수 있는 다양한 옵션이 포함된 그리드 섹션이 포함됩니다.

레이아웃 창

그리드 편집기로 그리드 항목 및 콘텐츠 정렬

CSS 규칙을 입력하는 대신 버튼을 클릭하여 그리드 항목과 콘텐츠를 정렬할 수 있습니다.

그리드 항목과 콘텐츠를 정렬하려면 다음 단계를 따르세요.

요소 > 스타일 창에서 display: grid 옆에 있는 그리드 편집기 버튼을 클릭합니다.
그리드 편집기에서 해당 버튼을 클릭하여 그리드 항목 및 콘텐츠의 align-* 및 justify-* CSS 속성을 설정합니다.
표시 영역에서 조정된 그리드 항목과 콘텐츠를 확인합니다.

그리드 보기 옵션

레이아웃 창의 그리드 섹션에는 다음과 같은 두 가지 하위 섹션이 있습니다.

오버레이 디스플레이 설정
그리드 오버레이

각 하위 섹션을 자세히 살펴보겠습니다.

오버레이 디스플레이 설정

오버레이 디스플레이 설정은 다음 두 부분으로 구성됩니다.

a. 다음 옵션이 포함된 드롭다운 메뉴

선 라벨 숨기기: 각 그리드 오버레이의 선 라벨을 숨깁니다.
줄 번호 표시: 각 그리드 오버레이의 줄 번호를 표시합니다 (기본적으로 선택됨).
선 이름 표시: 선 이름이 있는 그리드의 경우 각 그리드 오버레이의 선 이름을 표시합니다.

b. 옵션이 있는 체크박스:

트랙 크기 표시: 전환하여 트랙 크기를 표시하거나 숨깁니다.
영역 이름 표시: 이름이 지정된 그리드 영역이 있는 그리드의 경우 영역 이름을 표시하거나 숨기려면 전환합니다.
그리드 선 확장: 기본적으로 그리드 선은 display: grid 또는 display: inline-grid가 설정된 요소 내부에서만 표시됩니다. 이 옵션을 사용 설정하면 그리드 선이 각 축을 따라 표시 영역 가장자리까지 확장됩니다.

이러한 설정을 자세히 살펴보겠습니다.

줄 번호 표시

기본적으로 양수 및 음수 선 번호가 그리드 오버레이에 표시됩니다.

줄 번호를 표시합니다.

행 라벨 숨기기

선 라벨 숨기기를 선택하여 선 번호를 숨깁니다.

선 라벨을 숨깁니다.

행 이름 표시

줄 이름 표시를 선택하여 숫자 대신 줄 이름을 볼 수 있습니다. 이 예시에는 left, middle1, middle2, right라는 이름의 4개 선이 있습니다.

이 데모에서는 CSS grid-column: left / right를 사용하여 주황색 요소가 왼쪽에서 오른쪽으로 확장됩니다. 선 이름을 표시하면 요소의 시작 위치와 끝 위치를 더 쉽게 시각화할 수 있습니다.

선 이름을 표시합니다.

트랙 크기 표시

트랙 크기 표시 체크박스를 사용 설정하여 그리드의 트랙 크기를 확인합니다.

DevTools는 각 줄 라벨에 [authored size] - [computed size]를 표시합니다. 작성자 크기: 스타일시트에 정의된 크기입니다 (정의되지 않은 경우 생략됨). 계산된 크기: 화면의 실제 크기입니다.

이 데모에서는 snack-box 열 크기가 CSS grid-template-columns:1fr 2fr;에 정의되어 있습니다. 따라서 열 선 라벨에는 작성된 크기와 계산된 크기(1fr - 96.66px 및 2fr - 193.32px)가 모두 표시됩니다.

스타일시트에 정의된 행 크기가 없으므로 행 선 라벨에는 계산된 크기인 80px 및 80px만 표시됩니다.

트랙 크기를 표시합니다.