[grid] 한쪽 column만 조금 밀려있는 grid 구현

grid-template-columns를 사용해서 데이터들을 순서대로 편하게+예쁘게 얹어줬는데,

오른쪽 줄의 시작부분만 조금 밀어서 지그재그처럼 보이게 해달라는 요청이 있었다.

 

const Grid = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  margin-top: 2rem;
  
  // 짝수번째 <a>태그에 top: 2rem을 줌
  a:nth-of-type(even) {
    position: relative;
    top: 2rem;
  }
`;

 

결과