반응형 레이아웃을 좀 더 쉽게 - display: grid;

See the Pen display: grid by nilgi (@nilgi) on CodePen.

 

display: grid; // 사용하면 반응형 페이지를 쉽게 만들수 있다.
grid-template-columns: auto auto auto; // 3열, 화면 크기에 맞게 자동으로 모두 똑같이

• grid-column-gap: 30px;
• grid-row-gap: 30px;
• grid-gap: 20px 40px;
• grid-gap: 5px; // 아이템 간격

• grid-column-start: 1;
• grid-column-end: 3;

• grid-row-start: 1;
• grid-row-end: 3; // 아이템의 시작점과 끝점을 지정 - 표의 셀 병합과 비스무리.