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

CSS 그리드 레이아웃 검사

제슬린 예

Twitter GitHub 홈페이지

소피아 에멜리아노바

GitHub

이 가이드에서는 Chrome DevTools의 Elements 패널에서 페이지에서 CSS 그리드를 탐색하고, 검사하고, 레이아웃 문제를 디버그하는 방법을 설명합니다.

이 도움말에 나온 스크린샷에 표시된 예는 과일 상자와 스낵 상자라는 두 웹페이지의 예입니다.

CSS 그리드 찾아보기

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

디스커버 그리드

배지를 클릭하여 페이지에서 그리드 오버레이 표시를 전환합니다. 오버레이는 요소 위에 나타나며, 그리드 선과 트랙의 위치를 보여줍니다.

Layout 창을 엽니다. 페이지에 그리드가 포함되어 있으면 레이아웃 창에는 이러한 그리드를 표시하는 여러 옵션이 있는 그리드 섹션이 포함됩니다.

레이아웃 창

그리드 항목과 그 콘텐츠를 그리드 편집기에 정렬

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

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

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

그리드 보기 옵션

Layout 창의 Grid 섹션에는 2개의 하위 섹션이 있습니다.

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

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

오버레이 디스플레이 설정

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

a. 다음 옵션이 있는 드롭다운 메뉴:

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

b. 체크박스의 옵션:

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

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

행 번호 표시

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

행 번호를 표시합니다.

행 라벨 숨기기

행 번호를 숨기려면 선 라벨 숨기기를 선택합니다.

행 라벨을 숨깁니다.

행 이름 표시

행 이름 표시를 선택하면 숫자 대신 행 이름을 볼 수 있습니다. 이 예에는 이름이 왼쪽, 중간1, 중간2, 오른쪽인 4개의 줄이 있습니다.

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

행 이름을 표시합니다.

트랙 크기 표시

그리드의 트랙 크기를 보려면 트랙 크기 표시 체크박스를 선택합니다.

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

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

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

트랙 크기를 표시합니다.