CSS실습예제05_그리드 레이아웃을 활용한 미에로화이바 갤러리

          .g01 > ul{
            display: grid;
            grid-gap: 20px;
            grid-template-columns: repeat(3, auto); /* 그리드 칸 수(가로) */
            grid-template-rows: repeat(3, auto); /* 그리드 줄 수(세로) */
            list-style: none;
            padding: 20px 0px;
          }
          .g01 > ul > li:nth-child(2){grid-area: 1/2/3/3;} /* 그리드 콘텐츠 병합 */
        

          .g02 > ul{
            display: grid;
            grid-gap: 20px;
            grid-template-rows: repeat(2, auto);
            padding: 20px;
            grid-template-areas: /* 지정한 이름을 가지고 위치 지정  */
            "g01 g02 g03"
            "g04 g02 g05"
            "g06 g07 g08"
          }
          .g02 > ul .item1{grid-area: g01;} /* 그리드 콘텐츠에 이름 지정 */
          .g02 > ul .item2{grid-area: g02;}
          .g02 > ul .item3{grid-area: g03;}
          .g02 > ul .item4{grid-area: g04;}
          .g02 > ul .item5{grid-area: g05;}
          .g02 > ul .item6{grid-area: g06;}
          .g02 > ul .item7{grid-area: g07;}
          .g02 > ul .item8{grid-area: g08;}