[grid layout] 그리드 레이아웃 사이 간격 margin 조절

그리드를 잡다 보면 margin을 통해 각 컨텐츠 간의 간격을 조절하는 경우가 많음

 

위아래 값을 줘야 해 처음엔 margin-bottom으로 조절했는데 맨 마지막 행에서는 margin-bottom이 필요하지 않고, 마지막 행에서 컨텐츠의 개수가 유동적으로 바뀌므로 margin-top이 더 적합함

 

방법은 두 가지가 있는데

① 레이아웃을 감싼 wrap에 마진 마이너스를 줘서 상쇄시킴
② 계산해서 마진이 없어지도록 함

 

두 번째 방법을 PC 4열, TB 2열, MB 1열로 가정하면 다음과 같다

---

PC ver
li {width: calc((100% - 61px)/4); margin-left: 20px; margin-top: 20px;}
li:nth-child(4n+1) {margin-left: 0;}
li:nth-child(-n+4) {margin-top: 0;}
-> PC 버전에서는 4개니까 4개의 맨 윗줄에서 margin-top을 0으로

---

TB ver
li:nth-child(4n+1) {margin-left: 20px;}
li:nth-child(-n+4) {margin-top: 20px;}
li:nth-child(2n+1) {margin-left: 0;}
li:nth-child(-n+2) {margin-top: 0;}
-> TB에서는 2개이므로 PC에서 4개로 잡았던 것들 풀어주고 2로 다시 잡음

---

MB ver
li {float: none; width: 100%; height: auto; margin-left: 0;}
li:nth-child(2n+1) {margin-left: 0;}
li:nth-child(-n+2) {margin-top: 20px;}
li:first-child {margin-top: 0;}
-> MB에서는 1개이므로 2개로 잡았던 것들 중 left는 없애주고 top만 살린 뒤 맨 첫 번째에서만 top 삭제