[애플클론] Grid Layout

메인페이지의 레이아웃 구성은 Grid 레이아웃으로 구현

⭐️ Grid Layout 구조

pc 사이즈에서는 col 2, row 5 로 구성하고 1행과 2행은 span으로 합쳐 각각 한줄씩 차지하도록 하였다.
mobile 사이즈에서는 col 1, row 8 로 구성

🖥 코드요약

//스타일 컴포넌트로 작성

const GridContainer = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-left: 15px;
  gap: 15px;

  @media screen and (max-width: 768px) {
    grid-template-columns: 1fr;
    margin-right: 15px;
  }
`

const GridItem = styled.div`
  grid-column: ${ props => props.column };
  grid-row: ${ props => props.row };

  @media screen and (max-width: 768px) {
    grid-column: 1 / 2;
    grid-row: ${ props => props.mrow };
  }
`

각각의 Grid item의 grid-column과 grid-row는 props로 전달

<GridContainer>
  <GridItem column={'1 / span2'} row={'1'} mrow={'1/2'} />
  <GridItem column={'1 / span2'} row={'2'} mrow={'2/3'} />
  <GridItem column={'1'} row={'3'} mrow={'3/4'} />
  <GridItem column={'2'} row={'3'} mrow={'4/5'} />
  <GridItem column={'1'} row={'4'} mrow={'5/6'} />
  <GridItem column={'2'} row={'4'} mrow={'6/7'} />
  <GridItem column={'1'} row={'5'} mrow={'7/8'} />
  <GridItem column={'2'} row={'5'} mrow={'8/9'} />
</GridContainer>

---

⭐️ 전체코드

https://github.com/brightyoung219/apple-web-clone/blob/main/src/pages/LandingPage.js