CSS 그리드 레이아웃 검사

Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

CSS 그리드 탐색

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

디스커버 그리드

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

그리드 배지 전환

Layout 창을 엽니다. 페이지에 그리드가 포함되면 레이아웃 창에는 이러한 그리드를 볼 수 있는 여러 옵션이 포함된 Grid 섹션이 포함됩니다.

레이아웃 창

그리드 편집기를 사용하여 그리드 항목과 해당 콘텐츠 정렬

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

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

  1. 요소 > 스타일 창에서 display: grid 옆에 있는 그리드 편집기 그리드 편집기 버튼을 클릭합니다.

    그리드 편집기 버튼

  2. Grid Editor에서 해당하는 버튼을 클릭하여 그리드 항목과 콘텐츠의 align-* 및 justify-* CSS 속성을 설정합니다.

    CSS 속성 설정

  3. 표시 영역에서 조정된 그리드 항목과 콘텐츠를 확인합니다.

그리드로 보기 옵션

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

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

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

오버레이 디스플레이 설정

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

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)만 표시됩니다. 스타일시트에 정의된 행 크기가 없기 때문입니다.

트랙 크기를 표시합니다.

지역 이름 표시

영역 이름을 보려면 영역 이름 표시 체크박스를 선택합니다. 이 예에서는 그리드에 top, bottom1, bottom2의 세 가지 영역이 있습니다.

영역 이름을 표시합니다.

그리드 선 확장

그리드 선 확장 체크박스를 선택하여 그리드 선을 각 축을 따라 표시 영역의 가장자리까지 확장합니다.

그리드 선을 확장합니다.

그리드 오버레이

그리드 오버레이 섹션에는 페이지에 있는 그리드 목록이 포함되며, 각 그리드에는 다양한 옵션과 함께 체크박스가 있습니다.

여러 그리드의 오버레이 보기 사용 설정

여러 그리드의 오버레이 보기를 사용 설정할 수 있습니다. 이 예에는 사용 설정된 두 개의 그리드 오버레이 main 및 div.snack-box가 있으며 각 오버레이는 서로 다른 색상으로 표시됩니다.

여러 그리드의 오버레이 보기를 사용 설정합니다.

그리드 오버레이 색상 맞춤설정

색상 선택 도구를 클릭하여 각 그리드 오버레이 색상을 맞춤설정할 수 있습니다.

그리드 오버레이 색상 맞춤설정

그리드 강조표시

강조표시 아이콘을 클릭하여 HTML 요소를 즉시 강조 표시하고 페이지에서 스크롤하여 Elements 패널에서 선택합니다.

그리드 강조표시