이제 CSS 그리드와 그리드 하이라이트 기능을 Firefox Developer Edition에서 사용할 수 있습니다.

이 기사는 Hacks 블로그에 게시 된 "CSS Grid and Grid Highlighter Now in Firefox Developer Edition"의 초역입니다.

CSS 그리드 이제 Firefox Developer Edition에서 사용할 수 있습니다(다운로드는 이쪽). 이 기능은 Chrome에서도 즉시 사용할 수 있습니다 (Safari 또는 Edge에서도). 이렇게 하면 웹사이트의 그리드 레이아웃을 쉽게 만들 수 있습니다.

CSS에서만 그리드 레이아웃을 만들 수 있으므로 HTML에서 그리드 레이아웃에 대한 설명을 삭제할 수 있습니다. 미디어 쿼리나 그 외의 문맥과 조합할 수도 있으므로, Twitter Bootstrap 나 Skelton 와 같은 컨텐츠 그리드를 나타내기 위해서 클래스 구조를 이용하는 것과 같은 프레임워크를 옮겨놓을 수 있습니다.

변경에 약해지는 리스크나 코드가 비대화되는 리스크, 웹상에서도 할 때에 따른 높은 유지보수 비용, 이들을 작게 하는 그리드는 레이아웃의 방식을 크게 바꿀 가능성을 가지고 있습니다. 이것을 Jen Simmons는 "웹에서 사용할 수 있는 진정한 아트 디렉션"이라고 부르고 Rachel Andrew는 CSS 그리드를 퍼뜨리기위한 Grid by Example을 만들었습니다. CSS 그리드를 알고 있다면 여기에서 시작하는 것이 좋습니다.



이 동영상에서도 사용되지만 그리드 하이라이트 도구를 사용하면 보고 있는 페이지의 그리드를 쉽게 볼 수 있습니다. 앞으로도 이러한 CSS 그리드를 사용한 개발을 돕는 툴을 충실해 나갈 예정입니다.

이 도구를 사용하려면 먼저 최신Firefox Developer Edition이 설치되어 있어야 합니다. CSS 그리드를 사용하는 페이지를 열고 (이 데모 페이지에서 시도하는 것이 좋습니다) 메뉴 개발 도구에서 Inspector를 선택하여 Inspector를 시작합니다. CSS에서 display: grid; 로 설정된 요소를 선택하고 "grid"옆에 있는 아이콘을 클릭하면 그리드 선이 표시됩니다.

앞서 언급했듯이 Firefox 개발 도구 팀은 그리드를 더 쉽게 사용할 수 있도록 개선을 계획하고 있습니다. 진행 상황은 다음 버그에서 확인할 수 있습니다.

그리드를 사용하는 페이지에서 자동으로 강조 표시하는 버튼 추가 (버그 1297100)

새 반응형 디자인 모드을 확장하여 그리드를 강조 표시하고 쉽게 그리드를 표시하는 옵션 추가

그리드를 쉽게 변경할 수 있는 패널 추가

전체에 대한 자세한 내용은 버그 1181227 메타 버그를 참조하십시오.

Helen V. Holmes 정보

Firefox 개발 도구 팀의 디자이너. 타이포그래피와 Arduino에 관한 것에 열정을 불태우고 있다.
모든 사람에게 건전한 기술 커뮤니티를 만드는 것을 강력하게 지원하고 있으며,
Women Who Code의 워싱턴 DC 지부 개설에 기여.
또한 전미에서 학생 하카손의 멘토를 맡는다.

웹사이트: 헴 v 보완 l s. 작은 m

Twitter: @helenvholmes

Helen V. Holmes의 다른 기사는 여기