[다락재 쉼터] Gatsby프로젝트에 CSS grid 적용하기

이제까지 만들던것을 전면 리뉴얼하기로하고 다 엎어버렸다. Responsive하게 최대한 가기 위해서 고민을 많이 하고 있다. 

 

우선 오늘 결과물은 아래와 같다. 

 

 

1. 최대 화면인 경우

 

최대 화면

 

 

2. medium size

 

medium size

 

 

3. Smallest size

제일 작을때

 

 

 

위와 같은 레이아웃을 잡기 위해서 나는 grid시스템을 적용했다. 다소간의 엄청난 뻘짓도 있었고, 아직 완벽하게 이해한 것은 아니지만, grid를 사용하면 확실하게 responsive한 레이아웃을 잡는 것이 쉬워지는것을 경험했다. 

 

 

 

적용 방법

우선 Header에 grid시스템을 적용하기 위해 아래와 같이 선언했다. 

 

const HeaderStyle = styled.header`
  grid-column: 2 / -2;
  border-bottom: 1px solid black;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
`;

const Header: FC = () => {
  return (
    <HeaderStyle>
      <Logo />
      <Nav />
    </HeaderStyle>
  );
};

여기서 grid를 적용했고 grid-template-columns은 repeat(auto-fit, minmax(200px, 1fr)) 을 적용했는데,

 

auto-fit: fit as many column as possible if it fits

minmax(200px, 1fr) : 최소 200px을 보장하고, 공간이 그러고도 남으면 서로 equally divide해서 1fr가진다라는 뜻이다. 

 

즉 여기선 각 칼럼은 꽉꽉 채워서 가지긴 하되, 최소 200px, 최대 1fr을 보장하고, 200px보다 작아지면 다음 row로 넘어가서 1fr까지 차지한다. 

 

 

2. 내가 문제를 봉착했던 것은 Logo랑 Nav가 1:1씩 먹으면 안되서였다. 그래서 

 

Nav에 아래와 같이 grid-column: span 2 을 줬더니 자동적으로 1: 2로 컬럼을 먹었다. 

 

const NavStyle = styled.nav`
  border-bottom: 1px solid green;
  min-height: 70px;
  grid-column: span 2;
`

 

이렇게 하면 logo는 최소 200px, nav는 최소 400px을 먹게 된다.

 

그런데 문제는 행이 바뀌고 나서인데, 이때 nav가 grid-column: 2를 먹게 되서 전체 그리드는 2개의 칼럼을 가지는데 grid-template-columns에 의해서 logo는 여전히 1fr을 먹게 되서 logo가 한 행을 다 차지하지 않게 되었다. 

 

이문제를 해결하기 위해서 한동안 삽질을 했는데 내가 깨달은 것은 media-query를 사용하는 것이 적절하겠다는 생각이었다. 

 

3. logo의 style을 아래와 같이 지정했다. 

const LogoStyle = styled.nav`
  border-bottom: 1px solid black;
  min-height: 70px;

  display: flex;
  justify-content: center;
  align-items: center;

  & p {
    border: 1px solid black;
  }

  @media (max-width: 800px) {
    grid-column: span 2;
  }
`;

max-width가 800일때 grid-column을 span 2로 잡도록 했다. max-width를 800px으로 잡은 이유는 내가 전체 레이아웃을 12칼럼으로 나누었고, 그중에 10개를 header가 차지하고 있는데, 이것의 3등분 했을때의 최소값은 minmax에 의해 600이니, 600/3*4에 의해서 800px일때가 breakpoint다(이거 구할때도 좀 머리아팠는데 여튼 수학 잘하는 사람들은 빨리 구했겠다)

 

 

Grid 후기

아직 어려운 점이 있긴 하지만 점차 사용이 익숙해질 것 같다.  앞으로도 계속 내용을 좀 업데이트 해보려고 한다.