chewing-grid.css - 동적으로 레이아웃이 바뀌는 카드 디자인

프로필 페이지 등에서는 사용자 아이콘과 이름 이외에 

간단한 설명을 붙인 카드 타입의 레이아웃이 자주 사용됩니다. 

사용자뿐만 아니라 GitHub의 저장소 목록이나 

제품 목록 페이지 등에서도 카드 형 배치는 편리하게 사용할 수 있습니다. 

그런 디자인을 제공하는 것이 chewing-grid.css입니다. 

폭과 나란히 개수 등도 세세하게 지정할 수있는 그리드 레이아웃을 제공합니다.

chewing-grid.css 사용법

 chewing-grid.css 데모입니다. 3 개 줄 지어 있습니다.

폭을 변경하고도 3개가 그대로 남아있다.

수량을 변경했습니다. 동적으로 표시가 바뀝니다.

실제모습입니다.

chewing-grid.css는 

컬럼의 수, 간격, 컬럼의 최소와 최대 너비를 동적으로 지정할 수 있습니다. 

디자인은 레스가 있기 때문에 폭이 바뀌어도 

제대로 갖추어 진 상태로 남아 있습니다. 

디자인 프레임 워크에는 이러한 디자인을 제공하는 것도 있지만, 

카드 레이아웃만을 사용하고 싶은 경우에는 chewing-grid.css이 편리하지 아닐까요. 

chewing-grid.css는 CSS3 만든 오픈 소스 소프트웨어 (MIT License)입니다.

chewing-grid - A CSS Grid ideal for card listing design

tzi/chewing-grid.css: A CSS Grid ideal for card listing design like tiles, videos or articles listing. Responsive without media-queries.