자~ 이전 편에 이어 이번 편은 어떻게 그리드를 적용시켰는 지 직접 보여드리겠다.
1. 화면 속 그리드 레이아웃 격자 구성.
css의 레이아웃은 어떤 것보다 화면 구성이 중요하다는 것을 깨달았기에... 이번에도 역시 레이아웃 구성 작업부터 실시했다. 먼저 그리드의 구성 속성인 격자 속성에 따라, 본질적으로 그리드가 쓰여야 할 구간을 설정해 줘야했다.
여기서 이미 구현된 화면을 봤을 때, 결국 격자 형식으로 배치의 필요성을 느끼는 것은 이미지였다. 그래서 이미지들을 구성하는 것에 있어서 그리드를 적용시켜야 겠다는 생각이 들었다.
이미지1 이미지 2 이미지3 이미지4
이미지5 이미지6 이미지7 이미지8
이미지9 이미지10
이미지11 이미지12
이런 식으로 윗단의 이미지들은 총 3행 4열의 형태로 구성하고, 다시 밑단은
1행 4열의 식으로 그리드를 각각 주는 것이 좋겠다는 구상을 했다.
2. scss에 바로 적용.
위의 코드처럼 콜럼과 로우의 4행 3열을 주는 코드를 줬다.
display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr);
그러면서 각각의 안에 크기는 1fr로 조절했고, 리핏 함수를 써서 일일이 코드를 간결화 시켰다.
그 결과는 어땠을까?
다행히도 별다른 문제 없이 기존처럼 잘 배치되었다. 이렇게 되면서 되려 플렉스 당시의 코드가 더 지저분하고 간결화 되지 않았음을 깨달았다.
별반 차이가 없어보이지만, 자세히 보면 보인다.
바로 그 차이는 그리드 당시에는 디스플레이와 콜럼 로우 정도만 설정해 줬다. 그런데 과거 플렉스 시절에는 랩은 기본이고, 저스티파이 콘텐트, 플렉스 랩 등 다양한 요소를 넣어줘야만했다. 그도 그럴 것이, 그리드는 격자로 이미 화면을 내가 나눠준 것이기 때문에 더 배치에 무엇을 줄 것이 없다.
이를 통해, 물론 상황에 따라 플렉스를 활용하겠지만, 아마도 그리드를 주로 쓰지 않을까 싶다. 이제 그리드를 막 알기 시작한 시점이라, 그리드를 완벽하게 다룰 수는 없다고 본다. 이제 더 수많은 기능들을 사용해보고 직접 경험해 봐야 내것으로 될 것이다.
혹여 그리드에 대해 훨씬 자세한 가이드가 필요하신 분들은 아래 링크를 참고바란다. 필자 역시 해당 글에서 참고와 인용을 많이 했기에 도움이 되실 것이다.
링크텍스트
------------------이상 그리드 고찰 끝------------------------
