북스타그램에서 영감을 얻은 제리책방의 메인페이지는 인스타와 비슷하게 격자 형태로 이루어져있다. 처음에는 반응형을 고려하여 격자형 레이아웃을 Flex로 구현하였다. Flex box에 flex-wrap: wrap 이라는 속성을주게되면 하위 콘텐츠들이
상위 콘텐츠의 Width를 벗어나면 바로 줄바꿈이 된다.
하지만 flex-box는 1차원 배치 속성이기 때문에 하위 콘텐츠들을 가운데 정렬한 상태에서 flex-wrap을 주게되면 코드는 다음과 같다.
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
위와같이 격자가 깨져버린다. 이건 예전에 스타일링할 때도 자주보던 문제인데 이번 기회에 display grid 를 사용해보기로 했다.
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 1.5rem;
row-gap: 1.5rem;
grid-template-columns: column의 형태를 표시한다. 지금은 1fr 1fr 1fr 이므로 같은 너비로 3개의 column으로 분리되어있다.column-gap: column 사이의 간격이다.row-gap: row 사이의 간격이다.
해당 코드를 적용한 모습이다.
Flex box 를 사용하게 되면 해당 격자의 간격을 주기위해서 Book Card 자체에다가 Margin을 줘야했지만 Grid 로 수정하고 좀 더 깔끔하게 간격을 조절할 수 있게되었다.
또한 Column 의 수도 **Grid**를 사용하니 좀 더 유연하게 조절이 가능하게 되었다. 이는 반응형 페이지를 제작할 때 더 유용하게 작용했다.
위 화면은 grid-template-columns: 1fr 1fr 1fr 을 모바일 화면일 때
grid-template-columns: 1fr 1fr; 으로 수정한 모습이다.
Grid Layout 이 확실히 2차원 형태의 격자를 수정할 때 Flex box 보다 유용한듯하다. 앞으로 자주 이용해야겠다.
댓글