display: grid;

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

 

.gc1 {
display: grid; /grid를 사용하면 반응형 페이지를 만드는게 조금 쉽다.
grid-template-columns: auto auto auto;
}

.gc2 {
display: inline-grid;
grid-template-columns: auto auto auto;
}

.gc3 {
display: grid;
grid-template-columns: auto auto auto;
grid-column-gap: 30px;
}

.gc4 {
display: grid;
grid-template-columns: auto auto auto;
grid-row-gap: 30px;
}

.gc5 {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 20px 40px; / column px row px;
}

.gc6 {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 5px; / gap 속기
}

.i7 {
grid-column-start: 1;
grid-column-end: 3; / 표의 셀 병합과 비슷한 원리. 아이템의 시작점과 끝점을 지정.
}

.i1 {
grid-row-start: 1;
grid-row-end: 3;
}