브라우저 디버거에서 그리드 표시하기

웹사이트 레이아웃 작업 중 그리드를 사용할 때, 요소들이 그리드 내에서 올바르게 배치되고 있는지 확인해야 할 때가 있습니다. 또한, 오류가 발생한 경우 어느 요소부터 잘못된 배치가 시작되는지 파악해야 합니다. 이러한 목적으로 브라우저의 디버거를 사용할 수 있습니다.

Chrome 브라우저의 디버거를 예로 들어 그리드를 살펴보겠습니다. 먼저 관심 있는 그리드 객체를 선택하고 마우스 오른쪽 버튼을 클릭한 후 목록에서 '코드 보기' 옵션을 선택합니다:

이제 브라우저 오른쪽에 열린 패널에서 우리의 그리드 객체 위로 커서를 가져가면, 부모 요소 옆 줄에 grid 버튼이 있는 것을 확인할 수 있습니다:

grid 버튼을 클릭한 후에는, 우리의 객체가 시각적으로 이해하기 쉬운 그리드 시스템으로 표시되고, 모든 열과 행의 번호가 표시되는 것을 볼 수 있습니다:

이제 디버거의 패널에 주목하세요. 여기에는 Styles, Computed, Layout 등의 탭이 있습니다. 기본적으로 활성화된 Styles 탭에서 Layout 탭으로 전환해 보세요. 여기에서 그리드의 설정 목록을 볼 수 있습니다:

첫 번째 옵션인 Show track sizes를 선택하여 트랙 크기를 표시해 보겠습니다:

Show area names 옵션을 사용하면 지정된 경우 그리드 영역의 이름을 표시할 수 있습니다. 또한 Extend grid lines 옵션을 선택하면 그리드 경계를 넘어 연장된 트랙 라인을 볼 수 있습니다: