CSS에서 눈금선을 표시할 수 있나요?

Question

CSS 그리드 레이아웃을 배우기 시작했습니다. 이상적인 세계에서는 여러 개의 그리드 상자가 있는 div를 설정하고 그 안에 요소를 정확히 배치하여 필요할 때 오버레이를 제공할 수 있습니다(Illustrator에서 Sticky on Grid를 사용하는 것과 비슷함).

그리드를 시각적으로 표현하지 않으면 매우 어려울 수 있습니다. 내 라이브 서버에서 그리드를 볼 수 있나요? Chrome 개발자 도구 "눈금선 표시"를 사용해 보았지만 새로 고치거나 변경할 때마다 사라집니다.

아니면 여러 요소와 빈 공간으로 구성된 보다 정확한 레이아웃을 원할 때 사용할 수 있는 더 좋은 시스템이 있나요?

P粉752826008 · Answer

Firefox 브라우저에는 이 기능이 있습니다 https://firefox-source-docs. mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html

현재 발생한 문제에 대한 버그가 생성되었습니다. https://bugzilla.mozilla.org/show_bug.cgi?id=1342310

P粉530519234 · Answer

@ashish-singh이 이미 답변했듯이 이미 언급한 Firefox CSS Grid Inspector 또는 Chrome Inspection CSS Grid Layout 기능과 같은 기본 브라우저 개발자 도구를 활용하는 것이 좋은 옵션입니다. 렌더링된 열, 행, 간격 등에 대한 중요한 정보를 제공하는 강력한 기능입니다.

어쨌든 CSS를 사용하여 지속적인 교차 새로 고침 방법을 구현하고 싶다면 그리드 항목에 outline 몇 가지 트릭을 사용하는 것이 좋습니다. 윤곽선을 사용하면 항목이 서로 접힐 수 있기 때문에(기술적으로 윤곽선은 공간을 차지하지 않기 때문에) 윤곽선을 동적으로 표시하거나 숨기더라도 브라우저 레이아웃 재계산이 실행되지 않기 때문에(테스트 중에 성능이 더 좋아졌습니다) 윤곽선을 사용하는 것이 좋습니다.

다음은 실제 상황을 보여주는 간단한 예입니다.

으아아아 으아아아