grid-area 레이아웃 만들기

See the Pen by nilgi (@nilgi) on CodePen.

 

.i1 {
     grid-area: header;
}
.i2 {
     grid-area: menu;
}
.i3 {
     grid-area: main;
}
.i4 {
     grid-area: footer;
}

.ga {
     display: grid;
     grid-template-areas:
     'header header header header header'
     'menu main main main main'
     'menu footer footer footer footer';
     grid-gap: 5px;
}