CSS[13] 그리드 인스펙터 사용하기

Firefox에는 브라우저를 통해 그리드를 검사 할 수있는 inbuilt 도구가 있습니다. Chrome에서이를 수행 할 수있는 제 3 자 도구가 있습니다.

Firefox DevTools는 브라우저에서 보는 모든 격자의 격자 레이아웃을 검사하는 방법을 제공합니다. 이는 많은 트랙에 걸쳐 그리드 항목이있는 복잡한 그리드 또는 매우 드문 드문 채워진 그리드가있는 경우 유용 할 수 있습니다. 이와 같은 경우 항목을 보유하고있는 실제 그리드를 시각화하는 것이 어려울 수 있습니다.

DevTools의 그리드 인스펙터를 사용하면 그리드 라인과 그 사이의 거터를 볼 수 있습니다.

이렇게 :

파이어 폭스 DevTools에서 볼 때 격자의 예.

Firefox 격자 속성을 사용하는 방법

Firefox DevTools를 사용하여 그리드의 레이아웃을 보는 방법은 다음과 같습니다.

1. 

   관리자 열기

   브라우저에서 일반적으로 웹 페이지를 보면서 검사 할 격자를 마우스 오른쪽 버튼으로 클릭 Inspect Element하고 상황 별 메뉴에서 선택하십시오 .

2. 

   Grid Inspector 선택

   display: grid소스 코드가있는 창에서 요소 가 선택 되었는지 확인 하고규칙탭이 다른 분할 창에서 선택되면 격자 아이콘 ()을 클릭하십시오 display: grid.

추가 클릭을 절약하려면 ...

그리드를 마우스 오른쪽 버튼으로 클릭하면 (1 단계) 그리드 항목이없는 빈 영역 (예 : 거터 또는 빈 셀)을 선택합니다. 대개 이미 선택된 격자 컨테이너가있는 관리자가 열립니다.

Chrome 확장 프로그램

글을 쓰는 시점에 Google 크롬에는 기본 제공되는 격자 검사자가 없습니다. 그러나이 목적을 위해 몇 가지 타사 도구가 제작되었습니다.

• CSS Grid Chrome 용 형광펜 은 GitHub에서 다운로드 할 수 있습니다.
• Nitty Griddy 는 CSS Grid로 스타일이 지정된 요소의 오버레이를 제공하는 확장 기능입니다.