CSS 그리드 레이아웃 검사

Jecelyn Yeen
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova

이 가이드에서는 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 패널에서 선택합니다.

그리드 강조표시