grid

masonry 일정하지 않은 비율을 가져올떄 사용

 

*부모

 grid-template-columns: repeat(3, 1fr); /* 3칸 */
 grid-template-rows: repeat(4, 1fr); /* 4줄 */

 

*자식

grid-column: span 3; /* 3칸을 차지하겠다 */
grid-row: span 2; /* 2줄을 차지하겠다 */

 

 

 

See the Pen CSS Grid by uni (@agosto) on CodePen.