복잡한 CSS 그리드 레이아웃을 시각적으로 쉽고 빠르게 완성하는 CSS Grid Layout 생성기 활용 방법을 살펴보자.

모든 디자인 영역에서 그리드 시스템은 중요한 역할을 담당하고 있고 웹디자인에 있어서 그 비중은 더 크다고 볼 수 있다. 그리드는 수평과 수직으로 구성된 디자인의 기본 요소라고 할 수 있다.

그리드는 디자인 작업에 일관성을 부여하고 그래픽 요소의 체계적인 배열을 갖추는 데 도움이 된다. 또한, CSS CLASS를 활용해서 웹페이지 레이아웃을 구축하는 행과 열을 제어할 수 있고 그것을 토대로 복잡한 중첩 레이아웃도 어렵지 않게 구축할 수 있다.

이글을 통해 소개하는 css-grid-layout-generator는 기존에 선보인 다양한 그리드 생성기와 달리 더 직관적이고 시각적인 인터페이스로 복잡한 그리드 레이아웃을 손쉽게 제작하고 빠르게 활용할 수 있도록 해준다.

그리드 트랙 자동 생성, HTML을 JSX로 내보내기, 클래스 이름을 CSS 모듈로 내보내기 그리고 Code Pen 생성 버튼을 통해 코드 생성 등 다양한 편의 기능을 제공하고 있다. 웹상에서 실행되므로 시간과 장소에 구애받지 않고 활용할 수 있다.

그리드 레이아웃 생성기는 다양하다. 하지만 웹디자이너, 웹 퍼블리셔가 보다 쉽고 빠르게 그리드 레이아웃을 만들 수 있는 생성기는 드물다. 이번 기회에 css-grid-layout-generator를 활용해서 생산성을 높여 보는 것은 어떨까?

출처: https://www.designlog.org/2512665?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+DesignlogOfMaru+(DESIGN+LOG+-+Design+%26+Digital+Convergence+Webzine) [디자인 로그(DESIGN LOG)]