[1차 프로젝트] 이미지 그리드

JS

 <div className="girdContainer">
        <img alt="item1" src="./images/slides/grid1.jpg" className="item1" />
        <img alt="item2" src="./images/slides/grid2.jpg" className="item2" />
        <img alt="item3" src="./images/slides/grid3.jpg" className="item3" />
        <img alt="item4" src="./images/slides/grid4.jpg" className="item4" />
      </div>

SCSS

.girdContainer {
    display: grid;
    grid-template-rows: repeat(2, 50%);
    grid-template-columns: repeat(4, 25%);
    width: 1400px;
    height: 558.97px;
    margin: 0 auto 80px auto;
    background-color: lightgray;

    img {
      width: 100%;
      height: 100%;
    }

    .item1 {
      grid-row: 1 / 3;
      grid-column: 1 / 3;
    }

    .item2 {
      grid-row: 1 / 2;
      grid-column: 3 / 5;
    }

    .item3 {
      grid-row: 2 / 3;
      grid-column: 3 / 4;
    }

    .item4 {
      grid-row: 2 / 3;
      grid-column: 4 / 5;
    }
  }